如何通过点击<li>激活HTML链接？

我有以下的标记，

<ul id="menu"> <li><a href="#">Something1</a></li> <li><a href="#">Something2</a></li> <li><a href="#">Something3</a></li> <li><a href="#">Something4</a></li> </ul> 

<li>有点大，左边有一个小图，我不得不点击<a>激活链接。 我怎样才能点击<li>激活链接？

EDIT1：

 ul#menu li { display:block; list-style: none; background: #e8eef4 url(images/arrow.png) 2% 50% no-repeat; border: 1px solid #b2b2b2; padding: 0; margin-top: 5px; } ul#menu li a { font-weight: bold; text-decoration: none; line-height: 2.8em; padding-right:.5em; color: #696969; } 

Answer 1

 #menu li { padding: 0px; } #menu li a { margin: 0px; display: block; width: 100%; height: 100%; } 

它可能需要对IE6进行一些调整，但这是关于你如何做的。

Answer 2

正如Marineio所说，你可以使用<li>的onclick属性来改变location.href ，通过javascript：

 <li onclick="location.href='http://example';"> ... </li> 

或者，您可以在<li>删除任何边距或填充，并在<a>的左侧添加一个大填充以避免文本通过项目符号。

Answer 3

只是抛出这个选项：

 <ul id="menu"> <a href="#"><li>Something1</li></a> <a href="#"><li>Something2</li></a> <a href="#"><li>Something3</li></a> <a href="#"><li>Something4</li></a> </ul> 

这是我在我的菜单中使用的样式，它使列表项本身成为一个超链接（类似于如何使图像成为链接）。
对于造型，我通常应用这样的东西：

 nav ul a { color: inherit; text-decoration: none; } 

然后，我可以将任何样式应用于我希望的<li>。

注意：validation器会抱怨这个方法，但是如果你像我一样，不要依靠你的生活，这应该工作得很好。

Answer 4

这将使整个<li>对象成为一个链接：

 <li onclick="location.href='page.html';" style="cursor:pointer;">...</li> 

Answer 5

只要将链接文本添加到“p”标签或类似的东西中，并添加边距和填充到这个元素，这样它就不会影响MiffTheFox给你的设置，即

 <li> <a href="#"> <p>Link Text </p> </a> </li> 

Answer 6

jqyery这是jQuery的另一个版本less一点短。 假设<a>元素位于de <li>元素的内部

 $(li).click(function(){ $(this).children().click(); }); 

Answer 7

或者你可以在你的<li>结尾处创build一个空链接：

 <a href="link"></a> .menu li{position:relative;padding:0;} .link{ bottom: 0; left: 0; position: absolute; right: 0; top: 0; } 

这将创build一个完整的可点击<li>并保持您的真实链接的格式。 它也可以用于<div>标签

Answer 8

您可以尝试在LI标签内的“onclick”事件，并改变“location.href”在JavaScript中。

您也可以尝试将li标签放在a标签内，但这可能不是有效的HTML。

Answer 9

以下似乎工作：

 ul#menu li a { color:#696969; display:block; font-weight:bold; line-height:2.8; text-decoration:none; width:100%; } 

Answer 10

如何通过点击<li>激活HTML链接？

通过使您的链接像你的李一样大：只要移动指令即可

 display: block; 

从李到a，你就完成了。

那是：

 #menu li { /* no more display:block; on list item */ list-style: none; background: #e8eef4 url(arrow.gif) 2% 50% no-repeat; border: 1px solid #b2b2b2; padding: 0; margin-top: 5px; } #menu li a { display:block; /* moved to link */ font-weight: bold; text-decoration: none; line-height: 2.8em; padding-right:.5em; color: #696969; } 

注意：你可以从两个select器中删除“ul”：#menu是一个足够的指示，除非你需要重视这两个规则来覆盖其他指令。

Answer 11

使用jQuery，所以你不必在<li>元素上写入内联javascript：

 $(document).ready(function(){ $("li > a").each(function(index, value) { var link = $(this).attr("href"); $(this).parent().bind("click", function() { location.href = link; }); }); });