Question

我使用Twitter Bootstrap作为表格界面。当我点击一个标签时，我正在调用一个隐藏并显示相应div的函数。这是我的HTML代码：

<ul class="nav nav-tabs">
    <li class="active" id="Chart1"><a href="#">Chart 1</a></li>
    <li  id="Chart2"><a href="#">Chart 2</a></li>
    <li  id="Chart3"><a href="#">Chart 3</a></li>
    <li  id="Chart4"><a href="#">Chart 4</a></li>
  </ul>

基于此，我使用以下jquery来显示和隐藏内容：

$(document).ready(function(){
   $("#pie").hide();
   $("#bar").hide();
   $("#Chart2").click(function(){
     $("#StateWise").hide();
     $("#pie").show();
   });
   $("#Chart3").click(function(){
       $("#StateWise").hide();
       $("#pie").hide();
       $("#bar").show();
   });
});

如何在点击时执行此操作，活动类会更改为该特定选项卡？

Answer 1

您可以这样写：

$("#Chart2").click(function() {

    $(".active").removeClass("active");
    $(this).addClass("active");
        $("#StateWise").hide();
    $("#pie").show();

});

$("#Chart3").click(function() {

    $(".active").removeClass("active");
    $(this).addClass("active");
        $("#StateWise").hide();
    $("#pie").hide();
    $("#bar").show();

});

Answer 2

尝试

$("#Chart1").click(function(){
     $('li.active').removeClass('active');
    $('this').addClass('active');
});

Answer 3

试试这个

$("#Chart3").click(function(){
     $('li.active').removeClass('active');
    $('this').addClass('active');
});

Answer 4

如果您正在使用引导程序4，则可以这样做。

$("#Chart1").click(function(){
 $('#Chart1').tab('show');
});

检查以下参考文献

https://getbootstrap.com/docs/4.3/components/navs/#tabshow

如何设置引导标签激活？

4 个答案: