`

jquery选项卡插件

阅读更多

jquery选项卡插件

把选项卡整合了一下,写成个插件,这样可以整个站,或整个页面有多个选项卡时,统一调用。代码的具体注意事项已经写进注释了。用于js获取元素的class名称必须有,选项卡本身的样式,另再取一个名字来设置(本人不大喜欢用id,一般写js代码也用class名称来获取元素)。这样也在一定意义上实现了行为和样式的分离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
        /*CSS源代码*/
        /*必须设置的*/
        .jsTab_con{ display:none;}
        .jsTab_title span{ cursor:pointer;}
        .jsTab_title .jsTab_this{ background:#096;}

        /*选项卡的样式*/
        .js_tab{ width:900px; margin:30px auto 0; border:1px solid #0C9;}
        .js_tab h2{ font-weight:normal; height:40px; line-height:40px; text-align:center;}
        .js_tab h2 span{ display:inline-block; width:270px; margin:0 10px; background:#0CF; color:#fff;}
        .jsTab_con{ width:848px; height:200px; border:1px solid #09C; margin:0 auto 20px;}

        /*其他样式,可忽略*/
        .cen{ text-align:center;}

    </style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<h3 class="cen">页面选项卡统一调用</h3>
<p class="cen">结构的标签可改,改成div,ul,li等等都可以,但结构和class不能变。而且.jsTab_title里面最好是span,否则需要修改插件的相应内容。</p>

<!--第一个选项卡-->
<div class="js_tab box1">
    <h2 class="jsTab_title"><span>标题11</span><span>标题12</span><span>标题13</span></h2>
    <div class="jsTab_con">
        内容11
    </div>
    <div class="jsTab_con">
        内容12
    </div>
    <div class="jsTab_con">
        内容13
    </div>
</div>

<!--第二个选项卡-->
<div class="js_tab box2">
    <h2 class="jsTab_title"><span>标题21</span><span>标题22</span><span>标题23</span></h2>
    <div class="jsTab_con">
        内容21
    </div>
    <div class="jsTab_con">
        内容22
    </div>
    <div class="jsTab_con">
        内容23
    </div>
</div>



<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    /*Javascript代码片段*/
    $(document).ready(function(){
        //使选项卡的第一项显示,必须加入
        var tabs=$(".js_tab");
        tabs.each(function(){
            $(this).find(".jsTab_title span").first().addClass("jsTab_this");
            $(this).find(".jsTab_con").first().show();
        });

        //调用,不能用本身的js_tab调用,需另起一个class或id
        $(".box1").js_tab();
        $(".box2").js_tab();

    });

    //选项卡插件
    ;(function($){
        $.fn.extend({
            "js_tab":function(){
                $(this).find(".jsTab_title span").each(function(index){
                    $(this).click(function(){
                        $(this).siblings("span").removeClass("jsTab_this");
                        $(this).addClass("jsTab_this");
                        var tab_c=$(this).parents(".js_tab").find(".jsTab_con");
                        tab_c.hide();
                        tab_c.eq(index).show();
                    });
                    return $(this);
                });
            }
        });
    })(jQuery);
</script>
</body>
</html>

 

 

 

 

 

.

分享到:
评论

相关推荐

    JQuery 选项卡插件

    JQuery选项卡插件的基本原理是利用CSS隐藏和显示不同的内容区域,通过监听用户交互(如点击按钮)来切换这些内容。通常,每个选项卡对应一个内容区域,初始时只有一个内容区域是可见的,其他则被隐藏。当用户点击...

    可以无限增加和华丽滚动的jquery选项卡插件

    标题中的“可以无限增加和华丽滚动的jquery选项卡插件”指的是一个基于jQuery库的UI组件,它允许用户创建能够无限滚动的选项卡界面。这种插件通常用于展示大量内容,如新闻、产品目录或者用户反馈,使得用户可以通过...

    jquery选项卡插件多种tab标签切换效果

    在网页设计中,jQuery选项卡插件是一种常用的交互元素,用于组织和展示多部分内容,而无需用户滚动或点击多个页面。这种技术通过简洁的UI设计提供了高效的信息浏览体验,尤其适用于内容丰富的网站和应用。本篇文章将...

    可关闭带左右滚动功能的jquery选项卡插件

    此作品是一款功能非常强大的jquery选项卡插件 此版本是一个测试版 但功能已经相当的强大了 效果已经非常棒了 页面上使用的代码也非常简单 jquery插件代码也不多 每个小功能还写好了注释 方便网友们学习 多的就不一一...

    FengTab jQuery 选项卡插件

    FengTab jQuery 选项卡插件

    多用途响应式的jQuery选项卡插件

    **jQuery选项卡插件概述** 在网页设计中,选项卡是一种常见的交互元素,用于组织和展示大量信息。jQuery,一个广泛使用的JavaScript库,提供了一系列插件来简化这种交互设计,如"multipurpose_tabcontent"。这款插件...

    可多次使用的jQuery tab选项卡插件.zip

    6. **兼容性**:考虑到浏览器兼容性,好的jQuery选项卡插件应能在主流浏览器上正常工作,包括Chrome、Firefox、Safari、Edge和Internet Explorer。 在压缩包内的文件中,我们可以期待找到以下组成部分: - **...

    FengTab jQuery 选项卡插件.zip

    FengTab 是一个选项卡插件,...最近学习 jQuery ,感觉 jQuery 奥妙无穷,虽然网上有无数优秀的选项卡插件,但是我还是希望能用自己的逻辑来写一个,作为练习。 结果居然写得不错,因此冒昧放到网上来给大家乐呵乐呵。

    jQuery选项卡Tabslet插件.zip

    考虑到浏览器兼容性,jQuery选项卡插件通常能良好地运行在主流的现代浏览器上,包括Chrome、Firefox、Safari、Edge以及较新的IE版本。然而,对于旧版浏览器,可能需要检查并解决潜在的兼容性问题。 10. **社区支持...

    jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能

    - **js**:这个文件夹包含了JavaScript代码,包括jQuery库和可能的自定义脚本,如选项卡插件的核心功能实现和配置设置。 在实际应用中,开发者需要在`index.html`中引入jQuery库和选项卡插件的JS文件,并根据需求...

    jquery_tabs选项卡插件 自己学习时候学的 花了一下午事件 有详细注释

    《jQuery Tabs 选项卡插件学习指南》 在网页设计中,选项卡是一种常见的交互元素,用于组织和展示大量信息。jQuery_Tabs 插件是一个轻量级且功能强大的工具,能够帮助开发者轻松实现这种效果。本文将基于提供的学习...

    tabs选项卡Jquery插件

    ### 三、使用JQuery选项卡插件步骤 1. **引入资源**:在HTML文档的`&lt;head&gt;`标签内引入JQuery库(如jQuery-1.x.x.min.js)和插件文件(如tabs.js)。 2. **HTML布局**:设置好选项卡的基本HTML结构,包括触发选项卡...

    简单响应式jQuery Tabs选项卡插件

    这款jQuery选项卡插件利用这一特性,使选项卡可以根据容器的大小进行弹性伸缩,确保在任何设备上都保持整洁的布局。 插件的简单性体现在两个方面:一是代码结构清晰,易于理解和定制;二是样式可以通过CSS来控制,...

    jquery选项 iframe选项卡

    "jquery.benma.tab"这个压缩包文件可能包含了一个名为"benma"的开发者编写的jQuery选项卡插件,特别地,它支持将内容嵌入到iFrame中,这样可以在选项卡之间加载不同的页面或内容。 ### jQuery选项卡基础 jQuery...

    基于jquery的选项卡插件

    **基于jQuery的选项卡插件**是Web开发中常见的交互元素,主要用于展示多组内容,通过切换选项卡来实现不同内容的显示与隐藏。在网页设计中,它能有效地组织和展示信息,提高用户体验。本插件是作者在学习过程中实践...

    jquery选项卡切换插件制作slider滑动选项卡切换

    总的来说,制作一个jQuery选项卡切换插件需要对HTML、CSS和jQuery有深入的理解。通过熟练运用这些技术,你可以创建出功能丰富、用户体验优秀的滑动选项卡组件。在学习过程中,不断实践和优化代码,将有助于提升你的...

    jquery选项卡模板

    “OrganicTabs”是压缩包中的文件名,很可能是一个具体的jQuery选项卡插件或者示例代码。这个命名暗示着该选项卡实现可能注重自然、流畅的动画效果,就像自然界中的变化一样平滑。 OrganicTabs可能包含了HTML结构、...

    简单响应式jQuery Tabs选项卡插件.zip

    1. JavaScript文件:包含jQuery选项卡插件的核心代码,可能命名为“jquery.tabs.js”或其他类似名称。 2. CSS文件:提供插件的默认样式,通常名为“tabs.css”。 3. HTML示例文件:演示如何在网页中使用插件,可能...

Global site tag (gtag.js) - Google Analytics