js、jq实现tab选项卡切换

最新推荐文章于 2025-03-11 18:12:26 发布

一个大点点.

最新推荐文章于 2025-03-11 18:12:26 发布

阅读量2.7k

点赞数 5

文章标签： javascript 前端开发语言 jquery

本文链接：https://blog.youkuaiyun.com/qq_53966155/article/details/126123707

版权

一、效果

就是这样的啦...（文章字数太少，发布不了）

二、说明

主要思路是利用jquery点击（click）事件，把所有tab对应的内容隐藏，显示一个默认的tab和内容，当点击tab时对应的内容显示出来且当前tab加上高亮样式；（样式根据自己需要自行调整）

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js、jq实现tab切换</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
        text-decoration:none;
    }
    .index .index_tab{
        width: 100%;
        height: 45px;
        background-color: #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .index .index_tab a{
        width: calc(100% / 4);
        height: 100%;
        line-height: 45px;
        color: #333;
        text-align: center;
        border: 1px solid #ddd;
    }
    .index .index_tab a:hover{
        background-color: #333;
        color: #fff !important;
    }
    .cur{
        background-color: #333;
        color: #fff !important;
    }
    .index_cont{
        width: 100%;
    }
    .index_cont .list{
        display: none;
        text-align: center;
        padding: 20px;
    }
    .selected{
        display: block !important;
    }
</style>
<body>
    <div class="index">
        <div class="index_tab">
            <a href="javascript:void(0);" class="cur">北京</a>
            <a href="javascript:void(0);">上海</a>
            <a href="javascript:void(0);">杭州</a>
            <a href="javascript:void(0);">深圳</a>
        </div>
        <div class="index_cont">
            <div class="list selected">北京是个好地方</div>
            <div class="list">上海是个好地方</div>
            <div class="list">杭州是个好地方</div>
            <div class="list">深圳是个好地方</div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $('.index_tab a').click(function () {
            // 当前点击的tab高亮，其他的tab取消高亮
            $(this).addClass("cur").siblings("a").removeClass("cur");
            //获取当前点击tab的id
            var index = $(this).index();
            //让对应索引的盒子显示 类名控制是否显示
            $(".index_cont .list:eq(" + index + ")").addClass("selected").siblings("div").removeClass("selected");
        })
    </script>
</body>
</html>

关注作者不迷路...