如何将JQuery函数压缩到一个块中？

时间：2013-10-26 13:57:33

标签： javascript jquery css

我对JQuery相对比较新，所以我需要你的帮助来缩小它：

<!--Tabs-->
<script>
$(document).ready(function () {
    $('ul.tabs-style1 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style1 li').removeClass('current');
        $('.tab-content-style1').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})
</script>
<script>
$(document).ready(function () {
    $('ul.tabs-style2 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style2 li').removeClass('current');
        $('.tab-content-style2').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})
</script>
<script>
$(document).ready(function () {
    $('ul.tabs-style3 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style3 li').removeClass('current');
        $('.tab-content-style3').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})
</script>

我如何将所有样式包含在一个块中？提前谢谢！

EDIT1： 我的标记如下：

<h4>Style 1</h4>
<ul class="tabs-style1">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
<li class="tab-link" data-tab="tab-3">Tab Three</li>
<li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>
<div class="clear"></div>
<div id="tab-1" class="tab-content-style1 current">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="tab-2" class="tab-content-style1">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab-3" class="tab-content-style1">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div id="tab-4" class="tab-content-style1">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<br>
<h4>Style 2</h4>
<ul class="tabs-style2">
<li class="tab-link current" data-tab="tab-5">Tab One</li>
<li class="tab-link" data-tab="tab-6">Tab Two</li>
<li class="tab-link" data-tab="tab-7">Tab Three</li>
<li class="tab-link" data-tab="tab-8">Tab Four</li>
</ul>
<div class="clear"></div>
<div id="tab-5" class="tab-content-style2 current">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="tab-6" class="tab-content-style2">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab-7" class="tab-content-style2">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div id="tab-8" class="tab-content-style2">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<br>
<h4>Style 3</h4>
<ul class="tabs-style3">
<li class="tab-link current" data-tab="tab-9">Tab One</li>
<li class="tab-link" data-tab="tab-10">Tab Two</li>
<li class="tab-link" data-tab="tab-11">Tab Three</li>
<li class="tab-link" data-tab="tab-12">Tab Four</li>
</ul>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="tab-10" class="tab-content-style3">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab-11" class="tab-content-style3">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div id="tab-12" class="tab-content-style3">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

我在想这样的事情可能没问题，但它不起作用：S 

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

4 个答案:

答案 0 :(得分：0)

您可以使用Multiple Selector (“selector1, selector2, selectorN”)，并假设您将1, 2, 3存储在data-tab属性中

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

我建议，将一个类用于特定用途，例如tabs-style而不是tabs-style1, tabs-style2, tabs-style3

答案 1 :(得分：-1)

你编号的课程并不漂亮。这假设data-tab属性与样式＃numbers没有任何关系。

<script>

$('ul.tabs-style1 li, ul.tabs-style2 li, ul.tabs-style3 li').click(function () {

    var tab_id = $(this).data('tab');

    $(this) .removeClass('current')
            .add("#" + tab_id)
            .addClass('current');

    $(this).attr('class').split(' ').forEach(function(cl){
        var re = /tabs-style(\d)/.exec(cl);
        if (re[1]) $('.tab-content-style' + re[1]).removeClass('current');
    });

});

</script>

答案 2 :(得分：-1)

每个人似乎都想“修复”你的jQuery代码......但我相信OP问题的答案非常简单......脚本不应该在单独的脚本块中。像这样...... 

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

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

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

答案 3 :(得分：-2)

$(document).ready(function () { // this fires when the page is ready, and executes the contained code.
    for(var i = 1; i <= 3; i++){ //this runs 3 times.
        $('ul.tabs-style'+i+' li').click(function () {//This sets the callback
            var tab_id = $(this).attr('data-tab');
            $('ul.tabs-style'+i+' li').removeClass('current');
            $('.tab-content-style'+i).removeClass('current');
            $(this).addClass('current');
            $("#" + tab_id).addClass('current');
        })
    }
})

这是压缩此代码而不重新设计它的正确方法。您可以轻松添加和删除

您不能使用单个类名，因为该类用于区分选项卡组。

相关问题
最新问题