單頁網站的“全頁導航”菜單中的鏈接不起作用

Question

即使li.a標簽定位到正確的部分ID，此頁面上的鏈接也無法使用。

HTML：

<header>
  <a href="#0" class="nav_icon"><i></i></a>
</header>

<nav id="main_nav">
  <ul>
    <li><a href="#red">Red</a></li>
    <li><a href="#green">Green</a></li>
    <li><a href="#blue">Blue</a></li>
    <li><a href="#yellow">Yellow</a></li>
  </ul>
  <a href="#0" class="nav_icon close"><i></i></a>
</nav>

<div id="wrapper">
  <section id="red">Red</section>
  <section id="green">Green</section>
  <section id="blue">Blue</section>
  <section id="yellow">Yellow</section>
</div>

我在這里想念什么嗎？ Codepen： https ：//codepen.io/soumyajitn/pen/BZaGmv

Answer 1

由於您的腳本在單擊鏈接后返回false，因此也會取消鏈接的默認行為，因此，如果在腳本中將其注釋掉，它將起作用

$( "#main_nav ul li a" ).click(function() {
  $( "#wrapper" ).toggleClass( "hide" );
  $( "#main_nav" ).toggleClass( "show" );
  $('.nav_icon').toggleClass('active');

  //return false;                            comment out this line

});

更新的代碼筆