-1

これが私のコードです

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
 <div class="tab-pane active" id="home">one</div>
<div class="tab-pane" id="profile">two</div>
<div class="tab-pane" id="messages">three</div>
<div class="tab-pane" id="settings">four</div>
</div>
<div class="tab">
 <div class="tab active" id="home">1</div>
<div class="tab" id="profile">2</div>
<div class="tab" id="messages">3</div>
<div class="tab" id="settings">4</div>
</div>

そしてここにcssコード

.tab-one > .tab-pane, .tab-two > .tab{
display: none;
 }
.tab-one > .active, .tab-two > .active{
display: block;
}

ホームをクリックして2つの除算値を表示するときのように、aboutコードにjqueryが必要です。
たとえば、プロファイルをクリックして 2 と 2 を表示するとします。 http://jsfiddle.net/DcGMG/2/

4

4 に答える 4

0

これを試して

$(function(){
    var myTabs = $('#myTab a');
    var tabOne = $('.tab-one > .tab-pane');
    var tabTwo = $('.tab-two > .tab');
    myTabs.on('click', function(){
        var tab = $(this).attr("href");
        tabOne.removeClass('active');
        tabTwo.removeClass('active');

        $('.tab-one').find('#'+tab).addClass('active');
        $('.tab-two').find('#'+tab).addClass('active');

    });
});

このDEMOをチェックしてください

于 2012-08-14T10:02:14.567 に答える
0

代わりにクラスを使用するマルチIDを定義し、セレクターを持っています;）

    <div class="tab-content">
            <div class="tab-pane active home">one</div>
            <div class="tab-pane profile">two</div>
            <div class="tab-pane messages">three</div>
            <div class="tab-pane settings">four</div>
    </div>
    <div class="tab">
            <div class="tab active home">1</div>
            <div class="tab profile">2</div>
            <div class="tab messages">3</div>
            <div class="tab settings">4</div>
    </div>

最初にアクティブなクラスを削除することを忘れないでください;)

    $.each($('.active'), function(key, value) {
            $(this).removeClass('active');
    }

新しいアクティブアイテムを追加します

    $.each($('.profile'), function(key, value) {
            $(this).addClass('active');
    }
于 2012-08-14T09:40:54.023 に答える
0 
$('ul#myTab​​​​​​​ li a').click(function(){
    $('div.tab-one div.tab-pane, div.tab-two div.tab').removeClass('active');
    var tab = $(this).attr('href');
    $('div.tab-one div' +tab +', div.tab-two div' +tab).addClass('active');
});​​​
于 2012-08-14T10:08:31.197 に答える
0

まず、タブの ID をクラスに変更します。次に、次のようにします。

jQuery(document).ready(function(){
    //add click handlers to your links
    jQuery("#myTab a").click(function(){
        //get the name for the tab that should be displayed
        var tab = jQuery(this).attr("href").replace("#","");

        //add the active class to the correct tab divs, and remove it from the others
        jQuery(".tab-content .tab-pane." + tab)
            .addClass("active")
            .siblings()
            .removeClass("active");

        jQuery(".tab .tab." + tab)
            .addClass("active")
            .siblings()
            .removeClass("active");
    });
});
于 2012-08-14T09:43:32.380 に答える