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

当我单击主页以显示两个除法值时，我需要 jquery 的 about 代码。
例如，如果我单击配置文件以显示两个和 2。 http://jsfiddle.net/DcGMG/2/

4

4 回答 4

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

首先，将选项卡的 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 回答
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');

    });
});

并检查此演示

于 2012-08-14T10:02:14.567 回答
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 回答