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

Question

我有以下标记，

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

Answer 1

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

这可能需要一些调整的IE6，但这是你如何做到这一点。

Answer 2

正如Marineio说，可以使用的onclick的<li>属性改变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> 上。

笔记： 验证者会抱怨这种方法，但如果你像我一样并且不以它们为基础生活，那么这应该很好用。

Answer 4

只需添加换链接文本在“P”标签或类似的东西，并添加margin和padding到该元素，这样就不会影响到MiffTheFox给你的设置，即。

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

Answer 5

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

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

Answer 6

jqyery这是与jquery少一些较短的另一个版本。 假设<a>元件是德<li>元件内部

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

Answer 7

下面似乎工作：

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

Answer 8

或者你可以创建你<li>结束的空链接：

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

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

这将创建一个完整的可点击<li>，并保持您的格式在您的真实链接。 这可能是<div>标签也是有用的

Answer 9

您可以尝试LI标签内的“点击”事件，并修改“location.href”中的JavaScript。

您也可以尝试放置一个标签内里的标签，但是这可能不是有效的HTML。

Answer 10

我发现了一个简单的解决方案：使标签“里‘是，在标签内的’a”：

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

Answer 11

锚点href链接适用于li：

#menu li a {
       display:block;
    }

Answer 12

如何通过点击 <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 是一个足够的指示，除非您需要重视这两个规则以覆盖其他指令。

Answer 13

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