【问题标题】:Make an li element clickable (not a link) [duplicate]使 li 元素可点击(不是链接)[重复]
【发布时间】:2015-07-31 07:51:50
【问题描述】:

这里有一个非常相似的问题Make A List Item Clickable (HTML/CSS),我读过它以寻求帮助,但我无法让它发挥作用。我的网页上有一个看起来像这样的链接

<a type="button" data-toggle="dropdown" ...>

点击后会显示一个包含无序列表的菜单。

<ul role="menu" ...>
   <li role="presentation" value="thing" onclick="myFunction()"...> <span>some</span> </li>
</ul>

现在我想要的是这个 li 元素是可点击的,并且就像它是一个链接,光标变成一只手并在悬停时改变颜色。然后,当单击无序列表中的 li 元素之一时,我希望函数“myFunction”运行。

【问题讨论】:

  • 你怎么能不让链接的问题起作用?
  • ^^ 埃文所说的。不用说,这只是一个重复,将相应地关闭。
  • 注意:您在type 中输入的内容不正确,a 元素上的type 不是(远程)inputbutton 上的type 是什么。详情请见the specification
  • 为什么不在
  • 元素中添加标签,例如
  • link
  • 这里有一个使用jquery的解决方案$("UL li").on('click', function (e) { window.location = "http://google.com"; e.preventDefault(); });
  • 标签: javascript html


    【解决方案1】:

    示例代码:

    li.link span {
      color: blue;
      text-decoration: none;
      cursor: pointer;
    }
    li.link span:hover {
      color: #00f;
      text-decoration: underline;
    }
    <ul role="menu">
       <li role="presentation" class="link" value="thing" onclick="myFunction()"><span>Text</span></li>
    </ul>

    【讨论】:

    • 好吧,我不知道我之前在元素上尝试 onclick 的 21 次我做错了什么,但现在它起作用了.. 那么是的,我想这是一个重复的问题。不管怎样,谢谢你的回答 Inkbug :)
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签