Meine Links (a href) funktioniert nicht

Question

Ich habe ein Problem, das ich nicht verstehe, meine Links (a href = "...") funktioniert nicht, sieht jemand einen Fehler?

$('.site-nav__item.has-dropdown').on('click tap', function (e) { 
 
    e.preventDefault(); 
 
    var className = "is-active"; 
 
    $(this).toggleClass(className); 
 
    });

.site-header { 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1); 
 
    display: block; 
 
    left: 0; 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
    .site-nav { 
 
    display: flex; 
 
    height: 75px; 
 

 
    &__item { 
 
     display: inline-block; 
 
     line-height: 73px; 
 
     float: left; 
 
     &.has-dropdown { 
 
     position: relative; 
 

 
     &.is-active { 
 
      .site-nav__dropdown { display: block; } 
 
     } 
 
     } 
 
    } 
 

 
    &__link { 
 
     cursor: pointer; 
 
     display: block; 
 
     font-size: 1.2rem; 
 
     letter-spacing: 0.03em; 
 
     overflow: hidden; 
 
     padding: 0 23px; 
 
     position: relative; 
 
     text-transform: uppercase; 
 
    } 
 

 
    &__dropdown { 
 
     box-shadow: 0 1px 3px rgba(0, 0, 0, .2); 
 
     display: none; 
 
     left: -37px; 
 
     min-width: 225px; 
 
     position: absolute; 
 
     top: 75px; 
 
     
 
     &__item { 
 
     line-height: 60px; 
 
     text-transform: inherit; 
 
     .site-nav__link { 
 
      font-size: 1.4rem; 
 
      text-transform: inherit; 
 
     } 
 
     } 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="site-header"> 
 
    <nav class="site-nav"> 
 
    <ul class="site-nav__links"> 
 
     <li class="site-nav__item has-dropdown"> 
 
     <a class="site-nav__link"> Click here </a> 
 
     <ul class="site-nav__dropdown"> 
 
      <li class="site-nav__dropdown__item"> 
 
      <a href="codepen.io" class="site-nav__link">Item 1</a> 
 
      </li> 
 
      <li class="site-nav__dropdown__item"> 
 
      <a href="google.com" class="site-nav__link">Item 2</a> 
 
      </li> 
 
      <li class="site-nav__dropdown__item"> 
 
      <a href="#" class="site-nav__link">Item 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    <div class="overlay"></div> 
 
    </nav> 
 
    </header>

Die Links sind in Drop-Down, nachdem im Menü klicken. Der erste Link verweist auf den Code, der zweite auf google ... aber er bleibt irgendwo hängen.

Vielen Dank!

Answer 1

Sie haben

e.preventDefault(); 

in Ihrem JS-Code. Das verhindert, dass Link im Grunde ein Link ist.

Btw. Das nächste Mal setzen Sie den JS-Code hier

Answer 2

Sie die http vergessen: // oder https: //

<ul class="site-nav__links"> 
    <li class="site-nav__item has-dropdown"> 
     <a class="site-nav__link"> Click here </a> 
     <ul class="site-nav__dropdown"> 
     <li class="site-nav__dropdown__item"> 
      <a href="http://codepen.io" class="site-nav__link">Item 1</a> 
     </li> 
     <li class="site-nav__dropdown__item"> 
      <a href="https://google.com" class="site-nav__link">Item 2</a> 
     </li> 
     <li class="site-nav__dropdown__item"> 
      <a href="#" class="site-nav__link">Item 3</a> 
     </li> 
     </ul> 
    </li> 
</ul> 

Answer 3

Ändern Sie den Anker-Tag auf diese

<li class="site-nav__dropdown__item"> 
      <a href="https://codepen.io" class="site-nav__link">Item 1</a> 
      </li> 
      <li class="site-nav__dropdown__item"> 
      <a href="https://google.com" target="" class="site-nav__link">Item 2</a> 
      </li> 

Wenn Sie in codepen einchecken, Klicken Sie mit der rechten Maustaste auf den Link und öffnen Sie die neue Registerkarte oder Sie können das Ziel auf leer setzen. Andernfalls blockiert copepen das Öffnen der neuen Site in sich selbst.