文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >如何将JQuery函数压缩到一个块中？

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

Stack Overflow用户
提问于 2013-10-26 13:57:33
回答 4查看 124关注 0票数 1

我对JQuery还比较陌生，所以我需要您的帮助来压缩以下内容：

代码语言：javascript
运行
复制
<!--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:我的成绩如下：

代码语言：javascript
运行
复制
<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>

我在想，这样的事情也许可以，但不起作用。

代码语言：javascript
运行
复制
$(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');
    })
})
javascript
jquery
css
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-10-26 14:05:38

您可以使用多个选择器(“selector1，selector2，selectorN”)，并假设您将1, 2, 3存储在data-tab属性中。

代码语言：javascript
运行
复制
$(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

票数 0
EN

Stack Overflow用户

发布于 2013-10-26 14:16:08

和你的编号课不太一样。这是假设数据选项卡属性与style#数字无关。

代码语言：javascript
运行
复制
<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>
票数 -1
EN

Stack Overflow用户

发布于 2013-10-26 14:18:19

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

代码语言：javascript
运行
复制
<!--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>
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/19607550

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档