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-属性告诉用户他们将要点击的内容。

完全可链接的li元素

3 个答案: