html - 如何通过单击激活 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;
}

score 130 · Accepted Answer

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

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

score 24 · Accepted Answer

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

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

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

score 15 · Accepted Answer

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

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

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

score 12 · Accepted Answer

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

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

score 8 · Accepted Answer

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

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

score 2 · Accepted Answer

以下似乎有效：

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

这将创建一个完全可点击的内容<li>，并将您的格式保留在您的真实链接上。它也可能对<div>标签有用

score 1 · Accepted Answer

1

Anchor href 链接适用于 li：

#menu li a {
       display:block;
    }

于 2019-04-02T06:40:15.760 回答

score 1 · Accepted Answer

1

a {
  display: block;
  position: relative;
}

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

于 2020-08-13T04:14:42.710 回答

score 0 · Accepted Answer

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

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

score -1 · Accepted Answer

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

score -2 · Accepted Answer

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

score -2 · Accepted Answer

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

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

html - 如何通过单击激活 HTML 链接?

14 回答 14

Related

Reference

html - 如何通过单击激活 HTML 链接
?