使用jquery使類激活

<div class="tabs"> 
    <ul id="tab" class="nav nav-tabs"> 
     <li class="active"> 
      <a href="#feed" data-toggle="tab">Feed</a> 
     </li> 
     <li> 
      <a href="#dashboard" data-toggle="tab">Dashboard</a> 
     </li> 
    </ul> 
</div>

當用戶單擊下面的鏈接。我想將#dashboard li更改爲活動狀態，並從#feed裏刪除活動狀態。我該怎麼做呢？使用jquery使類激活

<a href=".showfollowers" onclick='load_followers();' data-toggle="tab">See All</a>

來源

2012-04-22 arboles

您更好地使用非侵入式JavaScript：

<a href=".showfollowers" id="foo" data-toggle="tab">See All</a>

代碼：

$('#foo').click(function(){ 
     $('#dashboard').addClass('active'); 
     $('#feed').removeClass('active'); 
     load_followers(); 
     return false; // if needed. 
    });

雖然它可以與內嵌腳本來完成，內嵌代碼已被棄用。

來源

2012-04-22 01:55:49 gdoron

<div class="tabs"> 
       <ul id="tab" class="nav nav-tabs"> 
       <li class="active"><a href="#feed" data-toggle="tab">Feed</a></li> 
       <li><a href="dashboard" data-toggle="tab">Dashboard</a></li> 
       </ul> 
      </div> 

<a href="showfollowers" onclick='load_followers();' data-toggle="tab">See All</a> 


$('.showfollowers').click(function(){ 
    $(#tab li).removeClass('active'); 
    $('#dashboard').parent().addClass('active'); 

})

來源

2012-04-22 01:56:50

我會將id添加到元素，以便它很容易識別元素。

<div class="tabs"> 
    <ul id="tab" class="nav nav-tabs"> 
    <li id="liFeed" class="active"><a href="#feed" data-toggle="tab">Feed</a></li> 
    <li id="lidashboard""><a href="#dashboard" data-toggle="tab">Dashboard</a></li> 
    </ul> 
</div> 
<a href="#" data-toggle="tab" id="aSeeAll" >See All</a>

腳本

$(function(){ 
    $("#aSeeAll").click(function(e){ 
    e.preventDefault(); 
    $("#tab li").removeClass("active"); 
    $("#lidashboard").addClass("active"); 
    });  
});

工作樣本：http://jsfiddle.net/H2BBn/2/

來源

2012-04-22 01:59:29 Shyju

$("div.tabs li").eq(1).addClass("active").siblings().removeClass("active");

來源

2012-04-22 02:01:11 DG3

如果您先刪除，則無需查找兄弟姐妹。 '$（「div.tabs li」）。removeClass（「active」）。eq（1）.addClass（「active」）;' – epascarello 2012-04-22 13:26:42

是的，你是對的 – DG3 2012-04-22 15:04:43

的一種方式做到這一點是：

$("#tab li").removeClass("active"); 
$("#dashboard").parent().addClass("active");

這將首先刪除類「活動」的所有'李'元素然後將它添加到#dashboard選項卡的li元素。

另一種方法是使用siblings（）函數。

var dashboard = $("#dashboard").parent(), 
    siblings = dashboard.siblings(); 
siblings.removeClass("active"); 
dashboard.addClass("active")

來源

2012-04-22 02:29:26

可能這可以幫助你...找到更多關於撥動類http://api.jquery.com/toggleClass/

$("[href='showfollowers']").click(function(event){ 
    event.preventDefault(); 
    $("#tab li").toggleClass("active"); 
});

來源

2012-04-22 03:31:03 Dharmesh

我發現，上述方案中的工作只是部分對我來說。該選項卡已更改爲活動，但新內容未顯示。這是我結束了：

$('.ext-butt-class').click(function(e){ 
    e.preventDefault(); 
    $(".nav-tabs li").removeClass("active"); 
    $("[href='#requiredtab']").parent().addClass("active"); 
});

。凡.ext-butt-class被添加到已觸發開關和#requiredtab是我們努力的目標選項卡的一個名稱的鏈接。

希望能幫助其他人使用Roots Wordpress框架和/或Twitter Bootstrap。

來源

2012-09-24 16:33:53

使用jquery使類激活

回答

相關問題