如何通过添加类切换选项卡并在导航栏上使用JavaScript加载模板？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

语法错误的位置：应该是 function switchSimulasi() { $("#mainContent").load('template-simulasi-pinjaman.html'); }

回答：

要访问使用$(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：

以上是 如何通过添加类切换选项卡并在导航栏上使用JavaScript加载模板？ 的全部内容， 来源链接： utcz.com/qa/264466.html

回到顶部