javascript - 使用 jQuery 在单击时更改 li 和 div 的 css

Question

这是我的观点:

  <div class="tabbable">                    
         <ul class="nav nav-tabs">
             <li id="liTab1" class="active"><a id="a1" data-toggle="tab">Upload TOT Master</a></li>
             <li id="liTab2"><a id="a2" data-toggle="tab">View TOT Master</a></li>
             <li id="liTab3"><a id="a3" data-toggle="tab">Upload TOT Master Adhoc</a></li>
          </ul>
     <div class="tab-content">
          <div class="tab-pane active" id="tab1">
              <p>I'm in Section 1.</p>
          </div>
          <div class="tab-pane" id="tab2">
              <p>Howdy, I'm in Section 2.</p>
          </div>
          <div class="tab-pane" id="tab3">
              <p>Howdy, I'm in Section 3.</p>
          </div>
      </div>
  </div>

上面的代码以标签容器格式表示 View ，如下所示:

在更改选项卡时，我希望其相应的内容 div 应该变为事件状态，而其余选项卡将变为非事件状态。我使用了下面的 javascript 函数，但它不起作用:

jQuery:

  $(document).ready(function () {

    $("#a1").click(function () {
        $("#liTab1").addClass('active');
        $("#liTab2").removeClass('active');
        $("#liTab3").removeClass('active');
        $("#tab1").addClass('tab-pane active');
        $("#tab2").addClass('tab-pane inactive');
        $("#tab3").addClass('tab-pane inactive');
    });

    $("#a2").click(function () {
        $("#liTab1").removeClass('active');
        $("#liTab2").addClass('active');
        $("#liTab3").removeClass('active');
        $("#tab2").addClass('tab-pane active');
        $("#tab1").addClass('tab-pane inactive');
        $("#tab3").addClass('tab-pane inactive');
    });

    $("#a3").click(function () {
        $("#liTab1").removeClass('active');
        $("#liTab2").removeClass('active');
        $("#liTab3").addClass('active');
        $("#tab3").addClass('tab-pane active');
        $("#tab1").addClass('tab-pane inactive');
        $("#tab2").addClass('tab-pane inactive');
    });

});

如何实现？

Answer 1

Twitter-bootstrap-tabs 在 html 中还有一个名为 data-target 的属性，当设置为相应的 tab 目标将自动为您执行此操作，无需 javascript 的任何帮助。检查下面的代码和 DEMO 这里

<ul class="nav nav-tabs">
     <li id="liTab1" class="active"><a id="a1" data-target="#tab1" data-toggle="tab">Upload TOT Master</a></li>
     <li id="liTab2"><a id="a2" data-target="#tab2" data-toggle="tab">View TOT Master</a></li>
     <li id="liTab3"><a id="a3" data-target="#tab3" data-toggle="tab">Upload TOT Master Adhoc</a></li>
</ul>