Javascript 如何在每页多次使用jQuery代码

我只能对每页的单个选项卡实例使用以下代码。我对编程和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：

---

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

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

$('#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' );

---

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

$('#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' );

---

也许您更希望遍历函数中的元素，而您只是做了一点

$('.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 
});

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

---

阅读和可能会有所帮助。

也许您更希望遍历函数中的元素，这是您正在做的一点

$('.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 
});

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

---

在聚会上迟到可能会有帮助，但我认为这可能是一种更干净的方式

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>

这是一个非常简单的jQuery选项卡式导航

这可以包含任何内容

喜欢照片：


或视频：








第二菜单

第二个菜单可以包含任何内容

第二个菜单如照片：


第二个菜单或视频：

晚会迟到了，但我认为这可能是一种更干净的方式

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>

这是一个非常简单的jQuery选项卡式导航

这可以包含任何内容

喜欢照片：


或视频：








第二菜单

第二个菜单可以包含任何内容

第二个菜单如照片：


第二个菜单或视频：

不久前，我做过类似的工作：

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

$(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();

});

$（文档）.ready（函数（）{
//您可能希望将其添加到外部js文件中
initializeTabgroups=函数（）{
$（'div.tabgroup div.tabs'）。每个（函数（）{//
var children=[]；//正在为每个子级获取数据id和数据标题
$（this）.children（）.each（function（）{
push（{id:$（this.data（'id'），title:$（this.data（'title'））}）；
$（this.hide（）；//隐藏所有子项
});
$（this）.children（）.first（）.addClass（'active'）.show（）；//显示第一个子对象
$（this）.before（function（）{//创建一个控制面板
var pre=$（''）.addClass（'control'）；
forEach（函数（obj）{//为每个选项卡添加一个链接
前附加(
$('')  
);
});
返回预处理；
}());
var self=$（this.parent（）；
$（self）.find（'div.control a'）。each（function（）{//为每个元素添加单击函数
$（此）。单击（函数（）{
//更改内容
$（self）.find（'div.tabs div.tab[data id！=“+$（this.data（'trigger'）+“]））.hide（）；
$（self）.find（'div.tabs div.tab[data id=“”+$（this.data（'trigger'）+“]））.fadeIn（）；
//更改导航栏的活动类
$（self）.find（'div.control a[data trigger！=“+$（this.data（'trigger'）+“]））.removeClass（'active'）；
$（self）.find（'div.control a[data trigger=“”+$（this）.data（'trigger'）+“]））.addClass（'active'）；
});
});
//将活动类添加到第一个控件链接
$（self）.find（'div.control a'）.first（）.addClass（'active'）；
});
};
初始化etabgroups（）；
});

---

我知道这不是一个完美的解决方案，但我认为您可能想看看另一个解决方案。

不久前，我做了一些类似的工作：

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

$(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();

});

$（文档）