4 
<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をアクティブに変更し、＃feedliからアクティブを削除したいと思います。どうすればこれを行うことができますか？

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

7 に答える 7

4

控えめな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-22T01:55:49.460 に答える
2 
<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-22T01:56:50.000 に答える
1

そのための1つの方法は次のとおりです。

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

これにより、最初にすべての'li'要素のクラス"active"が削除され、次に#dashboardタブのli要素に追加されます。

もう1つの方法は、siblings（）関数を使用することです。

var dashboard = $("#dashboard").parent(),
    siblings = dashboard.siblings();
siblings.removeClass("active");
dashboard.addClass("active")
于 2012-04-22T02:29:26.670 に答える
1

これがあなたを助けるかもしれません...トグルクラスの詳細を見つけるhttp://api.jquery.com/toggleClass/

$("[href='showfollowers']").click(function(event){
   event.preventDefault(); 
   $("#tab li").toggleClass("active");
});
于 2012-04-22T03:31:03.060 に答える
0

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-22T01:59:29.843 に答える
0 
$("div.tabs li").eq(1).addClass("active").siblings().removeClass("active");
于 2012-04-22T02:01:11.700 に答える
0

上記の解決策は私にとって部分的にしか機能しないことがわかりました。タブがアクティブに変わりましたが、新しいコンテンツは表示されませんでした。これが私が最終的に得たものです：

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

.where.ext-butt-classは、切り替えをトリガーするリンクに追加され、#requiredtabターゲットにしようとしているタブの名前です。

RootsWordpressFrameworkやTwitterBootstrapを使用している他の人に役立つことを願っています。

于 2012-09-24T16:33:53.727 に答える