如何通过单击<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>激活链接？

编辑1：

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;
}

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

可能需要对IE6进行一些调整，但这就是您的操作方式。

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

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

另外，您可以删除中的任何边距或内边距<li>，并在的左侧添加一个较大的内边距，<a>以避免文本越过子弹。

只是把这个选项扔在那里：

<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>。

注意：验证者会抱怨这种方法，但是如果您像我一样，不以自己为生，那应该就可以了。

只需将链接文本添加到'p'标签或类似内容中，然后在该元素中添加边距和填充，这样就不会影响MiffTheFox给您的设置，即

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

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

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

以下似乎有效：

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

jqyery这是另一个版本，jquery的缩写要短一些。假设该<a>元素在de <li>element内部

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

或者，您可以在末尾创建一个空链接<li>：

<a href="link"></a>

.menu li{position:relative;padding:0;}
.link{
     bottom: 0;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
}

这将创建一个完整的可点击文件<li>，并使您的格式保持在实际链接上。它也可能对<div>标签有用

锚href链接适用于li：

#menu li a {
       display:block;
    }

您可以在LI标签内尝试“ onclick”事件，然后像在javascript中一样更改“ location.href”。

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

a {
  display: block;
  position: relative;
}

我认为这就是您所需要的。

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

通过使链接与您的Li一样大：只需移动说明

display: block;

从li到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;
}

旁注：您可以从两个选择器中删除“ ul”：#menu是一个充分的指示，除非您需要权衡这两个规则以覆盖其他指令。

我找到了一个简单的解决方案：将标签“ li”置于标签“ a”内：

<a href="#"><li>Something1</li></a>

使用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;
        });
    });
});