如何将引导选项卡设置为活动状态？

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

});