jquery封装一个tab切换组件

最新推荐文章于 2024-09-16 14:31:24 发布

原创最新推荐文章于 2024-09-16 14:31:24 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery封装一个tab选项卡

jquery 专栏收录该内容

5 篇文章

订阅专栏

博客介绍了使用jQuery封装tab切换的方法，还提及了相关的HTML结构，但未给出具体代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用jquery封装一个tab切换

html结构：

<!--tabs示例-->
    <div class="mytabs">
        <!--选项卡区域-->
        <ul class="tabs-menu">
            <li class="tabsUnSeletedLi cur">选项1</li>
            <li class="tabsUnSeletedLi">选项2</li>
            <li class="tabsUnSeletedLi">选项3</li>
        </ul>
        <!--面板区域-->
        <div class="tabs-content">
            <div class="tabsDiv show">11111</div>
            <div class="tabsDiv hide">22222</div>
            <div class="tabsDiv hide">33333</div>
        </div>
    </div>

代码：

<script type="text/javascript">
        /*
         * @func tabs封装 放在公共js里面
         * @desc 选项卡切换
         * @param {Object} menu - document对象
         * @param {Object} cont - 内容区容器
         * @param {string} cur - 选择时状态类命名
         */
        function tabs(menu,cont,cur){
            menu.click(function() {
                var index = menu.index(this);
                $(this).addClass(cur).siblings().removeClass(cur);
                cont.children().eq(index).fadeIn().siblings().hide();
            });
        }

        /*单个js调用*/
        $(document).ready(function() {
            //tab切换
            tabs($('.tabs-menu li'), $('.tabs-content'),'cur');
        });
    </script>