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

これを行うことで、コードをより用途が広く将来性のあるものにすることができます。

まず、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 に答える
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 に答える