Мой сайт работает нормально, за исключением моих <a href="..."> ссылок. Они работают, когда у меня нет функции jQuery. Когда у меня есть функция jQuery, они не работают.

Мой код:

<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>

Странно то, что мой <a href="..."> на коробке работает, а тот, что в моем меню - нет.

Когда я удаляю функцию jQuery, она работает.

2
Rooster Rooney 6 Янв 2017 в 21:01

4 ответа

Лучший ответ

Ваш стиль для h1 перекрывает навигацию, просто поместите его в свой CSS и посмотрите изменения.

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

Спасибо

1
Timpal 6 Янв 2017 в 18:15

Вы получили опечатку во второй ссылке вашего меню:

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

Вы не закрываете его </a>

И

Как @Timbal указано

Ваш h1 перекрывает ваш nav, просто поместите в nav большее z-index, чем z-index из h1:

nav {    
    position: relative;    
    z-index: 1001;
}
1
Community 23 Май 2017 в 11:54

Ваш блок контента - это z-index, а меню нет. Итак, когда ваш jQuery запускает и раскрывает контент, он заканчивается z-index поверх вашего меню. У вас есть два варианта. Либо добавьте:

pointer-events: none;

... к вашему фону контента, чтобы вы могли щелкнуть по слою (хотя это может повлиять на события кликов в этом контейнере), или вам нужно дать вашему меню позицию: абсолютную и z-index выше, чем у вашего div "content".

1
Korgrue 6 Янв 2017 в 18:16

Ваш .content расположен абсолютно, поэтому он, вероятно, скрывает вашу навигационную панель, которая не позволяет нажимать на что-либо (даже если она не отображается).

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

Когда jQuery не включен, этот контент скрыт, что объясняет, почему он работает тогда. Возможно, отрегулируйте / удалите этот стиль, чтобы увидеть, сохраняется ли проблема.

1
sbeliv01 6 Янв 2017 в 18:13