javascript 如何使DIV标记可通过超链接单击

6ju8rftf 于 2023-01-29 发布在 Java

关注(0)|答案(5)|浏览(127)

你能帮帮我吗？我希望能够点击“创建道路网络”，但什么也没发生。这是我的代码https://jsfiddle.net/aba2s/fh49807n/4/

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Project structure</title>    
</head>
<body>
<div>
  <ul class="tree">
    <li><div class="sticky">Project</div>
      <ul>
        <!-- Sub category -->
        <li><div class="sticky">Road Network</div>
          <ul>
            <!-- Skill -->
            <li><div><a href="http://google.com">Create Road Network</a></div>
            <li><div>View Roads Networks</div>
            </li>
          </ul>
        </li>

        <li><div class="sticky">Zone set</div>
          <ul>
            <li><div>Create Zone Set</div>
            <li><div>View Zones Sets</div>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/71845133/how-to-make-a-div-tag-clickable-with-a-hyperlink

5条答案

按热度按时间

omjgkv6w1#

您的问题不是因为div在div中，而是ul的位置
您的ul位置为absolute，并且您的li z索引为-1，它位于ul图层下。这使得您的a不可单击
修复方法可能是删除.tree li中的z-index: -1;

.tree li {
  font-weight: bold;
  line-height: 3em;
  margin: 0;
  padding: 1.5em 0 0 2em;
  position: relative;
  /*z-index: -1;*/
}

完整代码
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-29

whhtz7ly2#

z-索引造成这个问题。如果你将它删除将是可点击的。

.tree li {
  font-weight: bold;
  line-height: 3em;
  margin: 0;
  padding: 1.5em 0 0 2em;
  position: relative;
  /*z-index: -1; */
}

赞(0）回复(0）举报 2023-01-29

ia2d9nvy3#

在看你的fiddle的时候，我试着删除你的每一个css行，直到它起作用。。最后我发现了这个
你必须到删除position: relative;在你的.tree li之后这样做链接将工作
下面是.tree li的外观

.tree li {
  font-weight: bold;
  line-height: 3em;
  margin: 0;
  padding: 1.5em 0 0 2em;
  /* position: relative; */
  z-index: -1;
}

你也可以仅仅使链接成为一个具有不同位置的单独类

编辑：通过查看其他答案，我发现删除z-index: -1是更好的解决方案

赞(0）回复(0）举报 2023-01-29

kupeojn64#

你应该做的

<li>
  <a href="https://www.google.fr/">
    <div>Create Road Network</div>
  </a>
</li>

它在一半的分区上工作

赞(0）回复(0）举报 2023-01-29

kkih6yb85#

您的对象中不需要链接。
但是cursor: pointer;在你的css的div类中，所以它看起来是可以点击的。
然后转到html文件，将onlick="window.location = 'YourLink'"放入html标记中。
例如：

<li onlick="window.location = 'https://google.com'">Test - Button</li>

赞(0）回复(0）举报 2023-01-29

我来回答

javascript 如何使DIV标记可通过超链接单击

5条答案

相关问题

热门标签

最新问答