Question

My website is working fine, except for my <a href="..."> links. They work when I don't have a jQuery function in there. When I do have the jQuery function they don't work.

My code:

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }

  body {
    font-family: Calibri, sans-serif;
    text-align: center;
  }

  .hidden {
    display: none;
  }

  .background-wrap {
    position: fixed;
    z-index: -1000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
  }

  #video-bg-elem {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    background-size: 100%
  }

  .content {
    position: absolute;
    width: 100%;
    min-height: 100%;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    margin: auto;
    z-index: 1000;
  }

  .content h1 {
    text-align: center;
    font-size: 65px;
    text-transform: uppercase;
    font-weight: 300;
    color: #fff;
    padding-top: 18%;
    margin-bottom: 10px;
  }

  .content p {
    text-align: center;
    font-size: 20px;
    letter-spacing: 3px;
    color: #aaa;
  }

  .box {
    width: 200px;
    -webkit-transition: all .2s;
    background: #e3e3e3;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    color: #333;
    border-radius: 5px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, .5), 1px 1px 5px rgba(0, 0, 0, .3);
    cursor: pointer;
  }

  .box:hover {
    background: #333;
    color: #e3e3e3
  }

  nav > ul > li {
    display: inline;
    text-align: center;
    color: white;
    margin: 0 auto;
    overflow: hidden;
    font-size: 20px;
    padding: 1em;
  }

  nav > ul > li.active {
    text-decoration: underline;
  }

  a {
    text-decoration: none;
    color: inherit;
  }
  </style>
</head>

<body>
  <br>
  <nav>
    <ul>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="producten.html">Assortiment<a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <div class="background-wrap">
    <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
      <source src="video.mp4" type="video/mp4"> Video not supported
    </video>
  </div>
  <script>
  $(document).ready(function() {
    $('.hidden').fadeIn('slow').removeclass('.hidden')
  });
  </script>
  <center>
    <div class="hidden">
      <div class="content">
        <h1>OortjesShop.nl</h1>
        <p id="test">De webwinkel voor al jouw oortjes en koptelefoons!</p>
        <br>
        <br>
        <div class="box"><a href="producten.html" style="text-decoration: none; color: inherit;">Bekijk ons assortiment</a></div>
      </div>
    </div>
  </center>
</body>

</html>

The weird thing is that my <a href="..."> on the box does work, but the one on my menu doesn't.

When I remove the jQuery function it does work.

Answer 1

您在菜单的第二个链接中输入了拼写错误：

<a href="producten.html">Assortiment<a>

你没有用</a>

关闭它

和

@Timbal陈述

您的h1与nav重叠，只是nav比z-index z-index更高h1：

nav {    
    position: relative;    
    z-index: 1001;
}

Answer 2

您的.content绝对定位，因此它可能会遮盖您的导航栏，不允许点击任何内容（即使它似乎没有被覆盖）。

.content {
  position: absolute;
  width: 100%;
  min-height: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  margin: auto;
  z-index: 1000;
}

当jQuery不被包含时，该内容被隐藏，这可以解释为什么它的工作原理。也许调整/删除该样式以查看问题是否仍然存在。

Answer 3

你的h1风格与导航重叠，只需将它放在你的css中，然后看看变化。

nav { float: left; position: relative; width: 100%; z-index: 9999; }

由于

Answer 4

您的“内容”区块是z-indexed，但您的菜单不是。因此，当您的jQuery触发并显示内容时，它最终会在菜单顶部进行z索引。你有两个选择。添加：

pointer-events: none;

..到您的内容背景，以便您可以点击图层（虽然这可能会影响该容器中的点击事件），或者您需要为您的菜单提供一个位置：绝对和z-index高于您的“内容” “div。

为什么jquery会为我禁用<a href="">?

4 个答案: