Javascript 如何将JQuery函数压缩为一个块？

我对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>

您可以使用，并且假设您正在

数据选项卡

属性中存储

1,2,3

$(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

对于编号的类来说，这不太好。这是假设数据选项卡属性与样式#数字无关

$（'ul.tabs-style1 li，ul.tabs-style2 li，ul.tabs-style3 li'）。单击（函数（）{
var tab_id=$（this）.data（'tab'）；
$（this.removeClass（'current'））
.添加（“#”+选项卡id）
.addClass（“当前”）；
$（this.attr（'class'）.split（“”）.forEach（function（cl）{
var re=/tabs style（\d）/.exec（cl）；
if（re[1]）$（'.tab内容样式'+re[1]）.removeClass（'current'）；
});
});

似乎每个人都想“修复”您的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>

$（文档）.ready（函数（）{
$（'ul.tabs-style1 li'）。单击（函数（）{
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'）。单击（函数（）{
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'）。单击（函数（）{
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'）；
})
})

$（document）.ready（函数（）{//当页面准备就绪时触发，并执行包含的代码。
对于（var i=1；我从类中去掉了数字，只使用一个类。你是说一个块吗？如果你需要这些数字用于样式设计，请组合几个类。例如：
然后在选择器中匹配
ul.tabs
，在CSS中匹配
ul.tabs.style-N
。什么是jQuery函数，为什么没有标记javascript？@onetrickpony我需要不同样式的类。好吧，你在处理程序中匹配
。tabs style
和
。tabs content style
，而不是
。tabsleN
和
选项卡内容样式n
，因此这不起作用。使用单个类看起来确实是更好的解决方案。（顺便说一句，选择器串联中缺少空格和哈希符号）。使用单个类不会分离不同选项卡组的行为。此外，“数据选项卡”属性不存储1、2或3，而是存储关联内容的ID属性（例如“选项卡-1”）@FrédéricHamidi同意……但正如OP所说，他对jQuery非常陌生，整合在这一点上可能会让人困惑。仅仅将脚本放在同一块中以提高可读性是一个好的开始。你真的不需要仅仅为了建议删除无关的标记而发布答案。这种帮助的适当位置是在评论中。你没有回答这篇文章的问题。@Omn对不起，我正在帮助你压缩代码。代码最初是在3个单独的文档中。准备好的函数。你对自己保持态度怎么样？谢谢。@Charlie74，如果我被认为粗鲁，我道歉，我试图解释为什么我否决了你的答案。这段代码没有工作，没有解释，并且正在尝试重新编写有问题的代码，而不是将其压缩。
$(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');
    })
})

<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>

<!--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>

$(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');
        })
    }
})