使用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>

上面的代码以tab容器格式表示视图，如下所示：

在更改选项卡时，我希望其对应的内容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>

Answer 2

您不必单独访问该项目，也不必在列表中添加锚点。 你可以使用css更改指针。

你可以用这种方式改变html：

<li id="liTab1" class="active" data-tab="tab1">Upload TOT Master</li>
<li id="liTab2" data-tab="tab2">View TOT Master</li>
<li id="liTab3" data-tab="tab3">Upload TOT Master Adhoc</li>

这是一段代码：

    $('ul.nav-tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.nav-tabs li').removeClass('active');
        $('.tab-pane').removeClass('active');

        $(this).addClass('active');
        $("#"+tab_id).addClass('active');
    });