Javascript 如何使整个'；李'；区域和文本可单击链接

我试图使整个

li

标记区域以及我已经使之可点击的文本都可点击。我试着给它一个

href

属性，但这不起作用。我已经将

li

背景设置为鼠标悬停时改变颜色，但正如我所说的，如何使整个区域也可单击？提前谢谢

HTML:

这应该有助于更清楚地看到我在做什么，正如你在这张图中所看到的——唯一可点击的区域是chromes inspect中易于看到的蓝色部分。因此，我要做的是使特定“主页”的整个区域都可单击。

基于列表的菜单规则1：设置链接样式，而不是包装样式。仅为定位（显示/浮动等）设置列表样式

在A标签上使用

display:block

，并将所有样式放在该标签上，而不是列表本身

家

将

背景色：#333

移动到css中的

.link

类中，并将

显示：block

添加到该声明中。

基于列表的菜单规则1：设置链接样式，而不是包装。仅为定位（显示/浮动等）设置列表样式

在A标签上使用

display:block

，并将所有样式放在该标签上，而不是列表本身

家

将

背景色：#333

移动到

中。在css中链接
类，并将
显示：block
添加到该声明中。

#nav li {
   list-style-type: none;
  /* margin: 0; */
  /* padding: 0.75em 0 0.75em 0; */
  /* text-align: center; */
  /* max-width: 100%; */
  /* display: block; */
}

#nav li a {
  display: block;
  padding: 0.5em 0;

  margin: 0;
  padding: 0.75em 0 0.75em 0;
  text-align: center;
  max-width: 100%;

}

对不起…试试这个

#nav li {
   list-style-type: none;
  /* margin: 0; */
  /* padding: 0.75em 0 0.75em 0; */
  /* text-align: center; */
  /* max-width: 100%; */
  /* display: block; */
}

#nav li a {
  display: block;
  padding: 0.5em 0;

  margin: 0;
  padding: 0.75em 0 0.75em 0;
  text-align: center;
  max-width: 100%;

}

如果您正在使用jQuery（假设标记是正确的），您可以这样做，而无需设置锚标记的样式：

$('ul li').click(function() {
   location.href = $(this).find('a').prop('href'); 
});

我建议为ul列表提供一个类名，如

如果您正在使用jQuery（假设标记是正确的），您可以这样做，而无需设置锚标记的样式：

$('ul li').click(function() {
   location.href = $(this).find('a').prop('href'); 
});

我建议为ul列表提供一个类名，如

将A标签环绕在LI标签上。例如，看看谷歌链接。只在文本周围放置A标记，而不是整个元素





将您的A标签环绕在LI标签上。例如，看看谷歌链接。只在文本周围放置A标记，而不是整个元素





只有一个锚点有一个
href
，当你点击其他锚点时会发生什么？一旦你添加了
href
，那么你的问题就解决了，请注意第一个锚点是可点击的，这是因为你在畅销书中添加了`href
href

，只有一个锚点有一个

href

，当你点击其他的时候会发生什么？一旦你添加了一个

href

，那么你的问题就解决了，注意第一个是可点击的，这是因为你在畅销书中添加了href

href

，但是OP确实有锚块，问题是缺少

href

，我不会投反对票，因为我知道你会更新你的answer@Diodeus恐怕我不知道你想说什么。我已经更新了这个问题，让它更清楚了。@SavageSpud——这个想法是让它看起来像整个东西都是可以点击的。您可以通过使LI不可见并设置链接本身的样式来实现这一点。但是OP确实有锚定块，问题是缺少

href

，我不会投反对票，因为我知道您将更新您的answer@Diodeus恐怕我不知道你想说什么。我已经更新了这个问题，让它更清楚了。@SavageSpud——这个想法是让它看起来像整个东西都是可以点击的。您可以通过使LI不可见并设置链接本身的样式来实现这一点。

$('ul.navigation li').click(function() {
       location.href = $(this).find('a').prop('href'); 
});