jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果

标签: 前端小常识  jquery  封装  html  前端  javascript

相信选项卡切换是大家常用的效果
单独写一个选项卡切换很方便
但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱
在这里插入图片描述

<div class="bodyCenter">
    <div class="nav">
        <span class="on">新闻</span>
        <span>热点</span>
        <span>动态</span>
    </div>
    <div class="main">
        <div class="boxModule active">这是一条新闻</div>
        <div class="boxModule">------这是一条热点------</div>
        <div class="boxModule">~~~这是一条动态~~~</div>
    </div>
</div>
<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{ background-color: #f6f6f6}
        .bodyCenter{
            width: 600px;
            margin: 100px auto;
        }
        .nav{
            overflow: hidden;
        }
        .nav span{
            background-color: #fff;
            border: 1px solid #ccc;
            border-bottom: 0;
            border-radius: 6px 6px 0 0;
            float: left;
            padding: 10px 20px;
            margin: 0 10px;
            cursor: pointer;
        }
        .nav span.on{
            background-color: #f6f6f6;
        }
        .main{
            padding: 30px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 6px;
        }
        .main .boxModule{ display: none;}
        .main .boxModule.active{ display: block;}
    </style>

正常单个的选项卡切换

$(".nav span").click(function () {
        let $index = $(this).index()
        $(this).addClass("on").siblings().removeClass("on")
        $(".main .boxModule").eq($index).show().siblings().hide()
    })

如果一个页面有多个选项卡效果那样只能复制粘贴然后修改参数
下面是我做的一个简单的封装,只要调用那个方法传入两个参数就好了

tabMethod(".nav span", ".main .boxModule")
    function tabMethod(tabNav, tabModule) {
        $(tabNav).click(function () {
            console.log('sadsa')
            let $index = $(this).index()
            $(this).addClass("on").siblings().removeClass("on")
            $(tabModule).eq($index).show().siblings().hide()
        })
    }

因为是基于jquery写的、所以在使用的时候需要引入jquery
用的是jquery.min.js

版权声明:本文为weixin_48201140原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_48201140/article/details/106709030