単一ページのWebサイトのフルページナビゲーションメニューでリンクが機能しない

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 

}); 

Updated codepen