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

小开

最佳答案

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

它可能需要一些调整为 IE6，但这是关于如何做到这一点。

小开

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

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

小开

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

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

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

小开

以下方法似乎有效:

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

小开

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

让你的链接和你的里程一样大: 只要移动指令

display: block;

然后你就完了。

那就是:

#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>对象作为一个链接:

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

小开

只要添加一个包装链接文本在’p’标签或类似的东西，并添加边距和填充到该元素，这样它就不会影响设置，米夫 TheFox 给你，即。

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

小开

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

小开

只是抛出这个选项:

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

注意: 验证者会抱怨这个方法，但是如果你像我一样，不把你的生活建立在他们的基础上，这个方法应该可以正常工作。

小开

Jqyery 这是另一个版本，jquery 稍微短一点。假设 <a>元素在 de <li>元素内

$(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>标签也很有用

小开

我找到了一个简单的解决办法: 使标签“ li”在标签“ a”中:

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

小开

锚链接适用于 Li:

#menu li a { display:block; }

小开

a { display: block; position: relative; }

我想这就是你需要的。

小开

尝试:

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

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

小开

Ignacio Pascual 提供了这个代码，它的工作原理非常有魅力。我想用一个流畅的滚动来增强它。

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

我试图添加一个平滑的滚动，通过分别使用这段代码的一部分或通过插入它:

$(document).ready(function(){ // Add smooth scrolling to all links $("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); });

但是我从来没有想过:

我认为这里有一个技巧，因为平滑滚动事件工作的元素和黑客的 li 元素使其可链接，它不是一个真正的元素。