Question

编辑问题以按要求添加jsfiddle.net链接。对于那个很抱歉。这是链接：http://jsfiddle.net/AuQL3/

我有这个看起来像这样的功能：

$(document).ready(function() {
    $('.innertabs2 > div').hide();
    $('.innertabs2 div:first').show();
    $('.innertabs2 ul.inner-tab-nav2 li:first').addClass('active');
    $('.innertabs2 ul.inner-tab-nav2 li a').click(function() {
        $('.innertabs2 ul.inner-tab-nav2 li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('.innertabs2 > div').hide();
        $(currentTab).fadeIn(400).show();
        //$(currentTab).show();
        return false;
    });
});

特别注意'.innertabs'和'.inner-tab-nav'选择器上的数字2。使这个功能更加可扩展的正确方法是什么，以便可以在页面上多次重复使用，而不是每次都手动创建一个新功能？

以下是我正在使用的HTML的简化版本：

<div class="tabs"><!--begin tab container-->

<ul class="tab-nav">
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
</ul>

<div id="MenuContent"><!-- begin main tab's content-->

        <div class="innertabs2"><!--begin subtab set 1 (need to autoincrement number)-->

            <ul class="inner-tab-nav2">
                <li><a href="#submenu1">Submenu 1</a></li>
                <li><a href="#submenu2">Submenu 2</a></li>
                <li><a href="#submenu3">Submenu 3</a></li>
            </ul>

            <div id="submenu1"><!--begin tab 1-->                   

                {{CONTENT}}

            </div><!--end tab 1-->

            <div id="submenu2"><!--begin tab 2-->

                {{CONTENT}}

            </div><!--end tab 2-->

            <div id="submenu3"><!--begin tab 3-->

                {{CONTENT}}

            </div><!--end tab 3-->

        </div><!--end subtab set 1-->

</div><!--end main tab's content-->

我尝试使用.each（）来获得所需的效果，但我认为我的语法已经过时了：

$(document).ready(function() {


 $(".tabs > div").each(function(i) {
        $('.innertabs' + i > div ').hide();
            $('.innertabs '+i div:first').show();
        $('.innertabs' + i 'ul.inner-tab-nav' + i li: first ').addClass('
        active ');
        $('.innertabs '+i '
        ul.inner - tab - nav '+i li a').click(function() {
            $('.innertabs' + i 'ul.inner-tab-nav' + i li ').removeClass('
            active ');
            $(this).parent().addClass('
            active ');
        var currentTab = $(this).attr('
            href ');
            $('.innertabs '+i > div').hide();
            $(currentTab).fadeIn(400).show();
            //$(currentTab).show();
            return false;
        }
        });
    });

Answer 1

您可以使用starts-with属性选择器.each()，而不是使用^=进行不必要的迭代：

$('[class^="innertabs"] > div').hide();
$('[class^="innertabs"] div:first').show();
$('[class^="innertabs"] ul[class^="inner-tab-nav"] li:first').addClass('active');
$('[class^="innertabs"] ul[class^="inner-tab-nav"] li a').click(function() {
    $('[class^="innertabs"] ul[class^="inner-tab-nav"] li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('[class^="innertabs"] > div').hide();
    $(currentTab).fadeIn(400).show();
    return false;
});

Answer 2

您错过了大量+和'，并且最后还有额外的}

$(".tabs > div").each(function(i) {
    $('.innertabs' + i + ' > div ').hide();
    $('.innertabs '+i +' div:first').show();
    $('.innertabs' + i + 'ul.inner-tab-nav' + i + ' li: first ').addClass('active ');
    $('.innertabs '+i +'ul.inner - tab - nav '+i+' li a').click(function() {
    $('.innertabs' + i +' ul.inner-tab-nav' + i +' li ').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('.innertabs '+i +' > div').hide();
    $(currentTab).fadeIn(400).show();
    return false;
});

Answer 3

你可以做的是使用几个类来区分元素，同时拥有可以在脚本中使用的公共类：

<div class="tabs">

    <ul class="tab-nav">

    <div class="inner-tabs second">
        <ul class="inner-tab-nav second">
        </ul>

        <div class="inner-tabs third">
            <ul class="inner-tab-nav third">
            </ul>
        </div>

    </div>

在您的脚本中，您只需使用类.inner-tabs对行为进行编码即可在CSS中，您可以合并.inner-tabs.second以区分样式。

我认为这种CSS类的使用产生了更清晰的标记以及更多的语义。

此外，使用过于复杂的jquery选择器会降低选择速度并降低可读性：.inner-tabs乍一看更有意义，然后[class^="innertabs"]正确吗？

选择器上的jQuery增量编号

3 个答案: