私のリンク（href）が機能しません

Question

私のリンク（a href = "..."）がうまくいかず、誰かが間違いを見ているとわからないという問題がありますか？

$('.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>

リンクは、メニューをクリックした後、ドロップダウンです。最初のリンクはcodepenにリダイレクトされ、Googleには2番目のリンク...しかし、どこかでつまった。

ありがとうございました！

Answer 1

あなたのJSコードで

e.preventDefault(); 

を持っています。それはリンクが基本的にリンクにならないようにします。

Btw。次回は、HTTPを忘れてしまった、ここで

Answer 2

JSコードを置く：//または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

変更し、これにアンカータグ

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

あなたはcodepenにチェックされている場合は、リンクを右クリックして新しいタブで開くか、ターゲットを空白に設定することができます。そうでなければ、codepenはそれ自身の内部で新しいサイトを開くのをブロックするでしょう