如何通過添加類切換選項卡並在導航欄上使用JavaScript加載模板？

我在cordova android項目上工作，我想用製表符做一個navbar，當我點擊選項卡時，它應該加載$("").load('');的內容並在其上添加一個active類。如何通過添加類切換選項卡並在導航欄上使用JavaScript加載模板？

添加 '主動' 一流的工作完美

的誤差，增加的onclick功能switchSimulasi()不工作

這是我的html代碼：

<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代碼：

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

來源

2017-12-27 Sebastian

什麼是錯誤？ – k102

哦，我忘了提及我的錯誤，錯誤是，添加onclick函數switchSimulasi（）不工作 – Sebastian

語法錯誤的位置：應該是 function switchSimulasi() { $("#mainContent").load('template-simulasi-pinjaman.html'); }

來源

2017-12-27 15:38:21 k102

要訪問使用$(this) 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：

來源

2017-12-27 11:31:58

對不起，我的錯誤是添加onclick函數switchSimulasi（）不工作，我忘了提及我的錯誤在我的文章 – Sebastian

如何通過添加類切換選項卡並在導航欄上使用JavaScript加載模板？

回答

相關問題