javascript - 完全可链接的 li 元素

Question

我需要使整个<li>或<tr>元素可链接，有人建议我使用 javascript，并带有 onclick 操作。

    function doNav(url)
    {
        document.location.href = url;
    }

这样做的工作，问题是，这种方式对用户来说是不可能的，了解 url 的去向。如何在不改变浏览器行为的情况下实现我的需求（完全可点击的元素）？

Answer 1

你不需要javascript。添加这个CSS

ul li a {
  display: block;
  padding: 10px 20px;//more or less, to suit your needs
  text-decoration: none;
}

这将使整个<li>包含一个锚点可点击

Answer 2

<li class="block"><a href="whatever">Text</a></li>

这可以让你看到目标。进而：

.block{
    display:block;
    text-decoration:none; //just so it isn't underlined
}

在 CSS 中将处理“整个事物需要可点击”的问题。

Answer 3

HTML

<ul class="menu">
 <li class="anchors" title="click me I am a link" > link 1 </li>
 <li class="anchors" title="click me I am a link" > link 1 </li>
 <li class="anchors" title="click me I am a link" > link 1 </li>
 <li class="anchors" title="click me I am a link" > link 1 </li>
</ul>

CSS：

ul li.anchors{
 text-decoration:underline;
 color:blue;
 list-style-type:none;
 display: inline-block;
 margin:2px 4px;
 padding: 2px 4px;
}

ul li.anchors:hover{
 color:navy;
 cursor:pointer;
}

更好的方法可能是这样的：http: //jsfiddle.net/iamanubhavsaini/Cv2FM/1/

在这里，使用content属性和data-属性预先告诉用户他们将要点击什么。