Question

我只能在每页的单个标签实例下使用以下代码。我是编程和JS的新手，所以我想就如何解决这个问题提出一些建议。

$(document).ready(function(){
$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#nav li').click(function() {
    $('#nav li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#tab-content div').hide();

    var indexer = $(this).index(); 
    $('#tab-content div:eq(' + indexer + ')').fadeIn();
});

})

的jsfiddle： http://jsfiddle.net/R85tE/309/

我不想手动向JS添加单独的ID来激活选项卡。我想要做的就是在同一页面上有多个选项卡区域，并使用JS中的一个类来处理它们。

Answer 1

您需要将标签内容的ID和第二个面板上的导航设置为另一个ID（每页不能超过1个ID）。因此，将第二个导航和选项卡更改为nav2和tab2-content。

$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#nav li').click(function() {
    $('#nav li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#tab-content div').hide();

    var indexer = $(this).index(); 
    $('#tab-content div:eq(' + indexer + ')').fadeIn();
});

$('#tab2-content div').hide();
$('#tab2-content div:first').show();

$('#nav2 li').click(function() {
    $('#nav2 li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#tab2-content div').hide();

    var indexer = $(this).index(); 
    $('#tab2-content div:eq(' + indexer + ')').fadeIn();
});

编辑：强大的功能

function initTabPanel( navid, tabid ) {

    $('#' + tabid  + ' div').hide();
    $('#' + tabid  + ' div:first').show();

    $('#' + navid  + ' li').click(function() {
        $('#' + navid  + ' li a').removeClass("active");
        $(this).find('a').addClass("active");
        $('#' + tabid  + ' div').hide();

        var indexer = $(this).index(); 
        $('#' + tabid  + ' div:eq(' + indexer + ')').fadeIn();
    });

}

// Initialzing the two tab panels
initTabPanel( 'nav', 'tab-content' );
initTabPanel( 'nav2', 'tab2-content' );

Answer 2

也许你正在寻找更多的东西来遍历你的功能中的元素，你正在做些什么？

$('.tabmenu div div:first').show();

$('.tabmenu ul li').click(function() {
    var $self = $(this);
    var $nav = $(this).parent();
    var $tabCtl = $nav.parent();
    $nav.find('a').removeClass("active");
    $self.find('a').addClass("active");
    $tabCtl.children('div').children('div').hide();

    var indexer = $self.index(); //gets the current index of (this) which is #nav li

    $tabCtl.children('div').children('div:eq(' + indexer + ')').fadeIn(); //uses whatever index the link has to open the corresponding box 
});

http://jsfiddle.net/daveSalomon/R85tE/339/

请注意，您的原始代码有重复的ID - 这是一个很大的禁忌！

阅读jQuery Traversal methods和jQuery Selectors。

可能会有所帮助

Answer 3

晚会但我认为这可能是一种更清洁的方式。

JSFIDDLE

<强>的Javascript

$('.tab-content div').hide();
$('.tab1').show();
$('.nav li').click(function() {
    var clickedObject = $(this);

    clickedObject.closest('.nav').find('.active').removeClass("active");
    clickedObject.find('a').addClass("active");

    var closestTabMenu =  clickedObject.closest('.tabmenu');
    closestTabMenu.find('.tab-content div').hide();

    var indexer = $(this).index(); //gets the current index of (this) which is #nav li
   closestTabMenu.find('.tab-content div:eq(' + indexer + ')').fadeIn(); 
});

你只需要改变你的html来使用类而不是ID

<强> HTML

<div class="tabmenu">

    <ul class="nav">
        <li><a href="#" class="active">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>

    <div class="tab-content">

        <div class="tab1">
            <p>This is a very simple jQuery tabbed navigation.</p>
        </div>

        <div class="tab2">
            <p>This can contain anything.</p>
        </div>

        <div class="tab3">
            <p>Like photos:</p><br />
            <img src="http://www.catname.org/images/cat04.jpg" alt=""/>
        </div>

        <div class="tab4">
            <p>Or videos:</p><br />
            <iframe width="250" height="180" src="http://www.youtube.com/embed/TZ860P4iTaM" frameborder="0" allowfullscreen></iframe>
        </div>

    </div>

</div>


<div class="tabmenu">

    <ul class="nav">
        <li><a href="#" class="active">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>

    <div class="tab-content">

        <div class="tab1">
            <p>second menu</p>
        </div>

        <div class="tab2">
            <p> second menuThis can contain anything.</p>
        </div>

        <div class="tab3">
            <p> second menu Like photos:</p><br />
            <img src="http://www.catname.org/images/cat04.jpg" alt=""/>
        </div>

        <div class="tab4">
            <p>second menu Or videos:</p><br />
            <iframe width="250" height="180" src="http://www.youtube.com/embed/TZ860P4iTaM" frameborder="0" allowfullscreen></iframe>
        </div>

    </div>

</div>

Answer 4

前段时间我做过类似的事情：

http://jsfiddle.net/js9kurec/

我做了一些纪录片工作来解释它的作用;简而言之，它从给定的选项卡创建导航，并添加切换它们所需的功能。

$(document).ready(function() {

    // you might want to add this to an external js file or so
    initializeTabgroups = function() {
        $('div.tabgroup div.tabs').each(function() { // for each tabgroup

            var children = []; // were getting data-id and data-title for each child
            $(this).children().each(function() {                
                children.push({ id: $(this).data('id'), title: $(this).data('title') });
                $(this).hide(); // hide all children
            });

            $(this).children().first().addClass('active').show(); // show the first child

            $(this).before(function() { // create a control panel
                var pre = $('<div></div>').addClass('control');

                children.forEach(function(obj) { // add a link for each tab
                    pre.append(
                        $('<a href="#" data-trigger="' + obj.id + '">' + obj.title + '</a>')  
                    );
                });

                return pre;
            }());

            var self = $(this).parent();
            $(self).find('div.control a').each(function() { // add the click functions for each element
                $(this).click(function() {

                    // change the content
                    $(self).find('div.tabs div.tab[data-id!="' + $(this).data('trigger') + '"]').hide();
                    $(self).find('div.tabs div.tab[data-id="' + $(this).data('trigger') + '"]').fadeIn();

                    // change the navbar active classes
                    $(self).find('div.control a[data-trigger!="' + $(this).data('trigger') + '"]').removeClass('active');
                    $(self).find('div.control a[data-trigger="' + $(this).data('trigger') + '"]').addClass('active');

                });
            });

            // add the active class to the first control link            
            $(self).find('div.control a').first().addClass('active');

        });
    };

    initializeTabgroups();

});

我意识到这不是一个完美的解决方案，但我想你可能想看一个替代解决方案。

我如何每页多次使用jQuery代码片段

4 个答案: