0

我正在尝试为我的标签清理我的 JQuery 代码。我有3种不同的风格。如何使以下内容更短？

$(document).ready(function () {
    $('.tabs-style1 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('.tabs-style1 li').removeClass('current');
        $('.tab-content-style1').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

$(document).ready(function () {
    $('.tabs-style2 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('.tabs-style2 li').removeClass('current');
        $('.tab-content-style2').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

$(document).ready(function () {
    $('.tabs-style3 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('.tabs-style3 li').removeClass('current');
        $('.tab-content-style3').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

您的帮助将不胜感激！ http://michellecantin.ca/test/features/tabs/

4

2 回答 2

0

这应该有效：

$(document).ready(function () { // use one document.ready
    $('ul[class*="tabs-style"] li').click(function (e) { // and one click handler
        var self = $(this), // cache DOM lookup
            styles = {
                "tabs": ".tabs-style",
                "content": ".tab-content-style"
            },
            i = self.parent().hasClass('.tabs-style1') ? '1' : self.parent().hasClass('.tabs-style2') ? '2' : '3', // get style number
            tab_id = self..attr('data-tab');
        styles.tabs += i; // concatenate style number
        styles.content += i;
        self = $(styles.tabs + ' li'); // re-lookup DOM element and cache again
        self.removeClass('current'); // unsure why you are doing this
        $(styles.content).removeClass('current');
        self.addClass('current');
        $("#" + tab_id).addClass('current');
    });
});

虽然我确信有比我更聪明的人可以进一步重构它，但我完全同意@gloomy.penguin 的观点，即减少代码行数只会降低它的可读性（因此更难维护）。

如果您真的希望它在 .js 文件中占用更少的空间，请使用缩小工具（有很多）。

于 2013-11-03T19:12:22.870 回答
0

您可以通过执行以下操作使您的代码更加通用和面向未来：

首先，tabbar为所有具有标签的元素添加一个类。然后，这应该是你的 jQuery：

$(function () {
    $('.tabs>li').click(function () {
        var tab_id = this.getAttribute('data-tab');
        var target = document.getElementById(tab_id);
        $(this.parentNode).children().removeClass("current");
        $(target.parentNode).children().removeClass("current");
        $(this).addClass('current');
        $(target).addClass('current');
    });
});

这通过找到您单击的选项卡的父节点和作为目标的面板，并将其用作隐藏其他选项卡/面板的基础，而不是依赖于类似的类名来工作。

于 2013-11-03T19:19:10.373 回答