更改Li和div的CSS上使用jQuery

點擊這是我的視圖：更改Li和div的CSS上使用jQuery

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

其表示如下面在標籤容器格式的視圖上面的代碼：

在更改選項卡，我希望其相應的內容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'); 
    }); 

});

如何實現這一目標？

來源

2015-11-09 thevan

能否請您創建小提琴並張貼在這裏的鏈接？ –

您正在使用'twitter-bootstrap'？ –

爲什麼要重新添加'tab-pane'類，它已經在那裏，您不必再次添加它。 – Ikbel

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>

來源

2015-11-09 12:55:20

您不必單獨訪問的項目，也必須添加列表裏面的錨。你可以用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>

，這是JS代碼片段：

$('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'); 
    });

來源

2015-11-09 12:56:29

更改Li和div的CSS上使用jQuery

回答

相關問題