如何设置Bootstrap标签页为活动状态？

Question

我正在使用Twitter Bootstrap来创建一个选项卡式的界面。当我点击一个选项卡时，我会调用一个函数来隐藏和显示相应的

元素。这是我的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();
   });
});

点击后如何使活动类更改为该特定选项卡？

- user3766332

---

为什么你不使用 http://getbootstrap.com/javascript/#tabs 作为你的选项卡界面？如果你使用它，就不需要为此编写自己的 JavaScript 代码。 - Sandeeproop

为什么你不使用Bootstrap的方式？ - Amal Ts

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();

});

- Brijesh Bhatt

Answer 2

如果您正在使用Bootstrap 4，则可以这样做。

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

请查看下面的参考资料。

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

- Soubhagya Kumar Barik

Answer 3

试试这个

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

- madalinivascu

Answer 4

尝试

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

- Arun Bertil