1

编辑问题以按请求添加 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;
        }
        });
    });​
4

3 回答 3

4

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

$('[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;
});
于 2012-06-15T20:13:12.423 回答
1

你错过了一堆，+最后'你还有额外}的

$(".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;
});
于 2012-06-15T20:09:45.827 回答
1

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

<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"]对吧？

于 2012-06-15T20:14:49.177 回答