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

【问题标题】：How to make the HTML link activated by clicking on the <li>?如何通过单击 <li> 激活 HTML 链接？
【发布时间】：2010-11-10 10:35:23
【问题描述】：

我有以下标记，

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

【问题讨论】：

标签： html css menu html-lists anchor

【解决方案1】：

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

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

【讨论】：

我会这样做。它将链接扩展为
标记的大小。

它的工作，但文本（链接）粘在右边框上，当我给了一个 padding-right: .5em 走出

不断调整，您会得到完美的外观。检查负边距和填充，有些东西可能没有加起来并且它正在崩溃。另外，请确保您没有错误的 text-align: right;卡在那里。

我通过实际给

一个 padding-right:0.5em 并让

和具有相同的背景颜色，给 text(link) 一个右填充。但是现在

的 .5em 右侧部分无法点击，但没关系。

San：通过智能地在链接本身上放置填充来解决这个问题：li { padding-top: .3em;底部填充：0.3em；一个{显示：块；边距：0px；左填充：10%；宽度：90%；高度：100%； } }

【解决方案2】：

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

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

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

【讨论】：

你能扩展一下吗？为什么这是一个坏主意

【解决方案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;
}

然后我可以对

应用我希望的任何样式。

注意：验证器会抱怨这种方法，但如果你像我一样，不以它们为基础，这应该可以正常工作。

【讨论】：

ul 元素的子元素（直接后代）必须都是 li 元素。这是纯粹的语法要求。 根据correct semantics for ul in ul - 此答案将导致 HTML 无效
出现了一个狂野的验证器。 :)

【解决方案4】：

只需将链接文本添加到“p”标签或类似标签中，并为该元素添加边距和填充，这样它就不会影响 MiffTheFox 为您提供的设置，即

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

【讨论】：

这个对我来说实际上是最好的。我使用了<span> 并将显示设置为阻止。跨度似乎比一个段落更正确。无论哪种方式，它都运作良好。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

以下似乎有效：

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

【讨论】：

【解决方案7】：

jqyery 这是另一个版本的 jquery 稍微短一些。假设 <a> 元素在 de <li> 元素内

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

【讨论】：

这将触发一个连续循环。由于点击孩子->也点击父母。

【解决方案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> 标签也很有用

【讨论】：

【解决方案9】：

锚href链接适用于li：

#menu li a {
       display:block;
    }

【讨论】：

【解决方案10】：

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

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

【讨论】：

根据我的经验，通过 Javascript 伪造链接几乎总是会导致糟糕的用户体验。
这只是他考虑的一种选择，毕竟这是他的网站。他可以在那里保留正常的链接，即使关闭 Javascript 也会正常运行（如果点击 li 则不会）。

【解决方案11】：

a {
  display: block;
  position: relative;
}

我想这就是你所需要的。

【讨论】：

【解决方案12】：

如何通过点击

来激活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 是一个足够的指示，除非您需要重视这两个规则以覆盖其他指令。

【讨论】：

这对我不起作用。当我将链接的显示更改为“阻止”时，它会将自身置于与项目符号不同的行。
让我细化那个响应......我上面解释的行为发生在 Firefox 和 Opera 中，但不在 Chrome 中。它在 Chrome 中运行良好。
如果你在 li 和 a 上都保持 display: block 怎么办？否则，请在单独的问题上发布您的问题。

【解决方案13】：

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

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

【讨论】：

这是无效的。唯一可能是<ul> 子元素的元素是<li> 。 <a> 必须在 <li> 内。 w3c.github.io/html-reference/ul.html
有效性和功能之间不一定有联系。

【解决方案14】：

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

【讨论】：