クラスを追加してタブを切り替える方法と、JavaScriptを使用してテンプレートをNavbarに読み込む方法はありますか？

Question

私はcordovaアンドロイドプロジェクトを担当しており、タブ付きのnavbarを作成したいのですが、タブをクリックすると内容が$("").load('');でロードされ、activeクラスが追加されます。

<nav class="navbar navbar-default navbar-fixed-top a-navbar box-shadow" id="a-navbar-default" style="z-index:997;"> 
    <div class="container"> 
     <div class="navbar-header col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <a class="navbar-brand" href="#"> 
       <span class="a-navbar-logo" onclick="openNav()"> 
        &#9776; Easly 
       </span> 
      </a> 
     </div> 
     <div class="navbar-header"> 
      <ul class="nav navbar-nav" id="a-navbar-nav"> 
       <li class="active active-box-shadow"><a href="#">Beranda</a></li> 
       <li onclick="switchSimulasi();"><a href="#">Simulasi Pinjaman</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

と私はこのjavascriptのコードで試してみました：完璧

エラーは、onclickの機能switchSimulasi()を追加すると、これは私のhtmlコードである

が動作していないされて 'アクティブ' クラスの仕事を追加

：

<script type="text/javascript"> 
    $(".nav li").on("click", function() { 
     $(".nav li").removeClass("active"); 
     $(".nav li").removeClass("active-box-shadow"); 
     $(this).addClass("active"); 
     $(this).addClass("active-box-shadow"); 
    }); 

    function switchSimulasi{ 
     $("#mainContent").load('template-simulasi-pinjaman.html'); 
    } 
</script> 

Answer 1

構文エラー： function switchSimulasi() { $("#mainContent").load('template-simulasi-pinjaman.html'); }

Answer 2

アクセスするを使用してjQueryので値、あなたがすべき - $(this)[0]、そう：

$(".nav li").on("click", function() { 
    $(".nav li").removeClass("active"); 
    $(".nav li").removeClass("active-box-shadow"); 
    $(this)[0].addClass("active"); 
    $(this)[0].addClass("active-box-shadow"); 
});  

しかし、このケースでは、IMOよりよいちょうど平野のJs：ここ