jQuery实现tab切换 (选项卡)-------有详细注释

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

s_turnTurn

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

阅读量610

点赞数

文章标签： html js css

本文链接：https://blog.csdn.net/s_turnTurn/article/details/107564218

版权

tab切换 (选项卡)----有详细注释


/* tab按钮和tab区域样式 */
 /* https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-between */
.tab-btn-box {
    display:flex;
    justify-content: space-between;
    width:600px;
}
.tab-btn-box .tab-btn {
    width: 100px;
    height:40px;
    background:#ccc;
    line-height:40px;
    border:1px solid #000;
    text-align: center;
    cursor: pointer;
}
.tab-box .tab-small-box{
    width:600px;
    height:300px;
    margin-top:10px;
    background:#ccc;
}
/* 点击按钮添加样式 */
.active{
    background:pink !important;
}
/* 初始化页面时将页面2，3，4，5，隐藏 */
/* 重要 */
.tabBox-hide{
    display:none;
}
/* 显示页面 */
/* 重要 */
.tabBox-show{
    display:block;
}


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/tab.css">
    <title>tab切换</title>
</head>

<body>
    <!-- 切换按钮 -->
    <div class="tab-btn-box">
        <div class="tab-btn active">按钮1</div>
        <div class="tab-btn">按钮2</div>
        <div class="tab-btn">按钮3</div>
        <div class="tab-btn">按钮4</div>
        <div class="tab-btn">按钮5</div>
    </div>
    <!-- 按钮下对应的tab页 -->
    <div class="tab-box">
        <div class="tab-small-box">页面1111111111111111111111111111</div>
        <div class="tab-small-box tabBox-hide">页面2222222222222222222222222222</div>
        <div class="tab-small-box tabBox-hide">页面3333333333333333333333333333</div>
        <div class="tab-small-box tabBox-hide">页面4444444444444444444444444444</div>
        <div class="tab-small-box tabBox-hide">页面5555555555555555555555555555</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // 如果为鼠标滑过按钮tab切换的话,将'click' 改为 'mouseover'
            $(".tab-btn").click(function () {
                //点击按钮,按钮变为粉红色背景的样式,其他的移除粉红背景的样式
                $(this).addClass("active").siblings().removeClass("active")
                //获取点击按钮的下标
                //点击按钮1,按钮1的下标为'0'
                var btnIndex = $(this).index();
                //获取点击按钮对应的tab区域
                //如果点击按钮1,按钮1的下标为0,那么就可以通过这个'0'获取按钮1所对应的区域,也就是"页面1111111111111111111111111111"
                var boxIndex = $(".tab-small-box").eq(btnIndex);
                //如果点击按钮,给这个按钮所对应的区域显示样式,移除隐藏样式,其他的区域移除显示样式,增加隐藏样式
                boxIndex.addClass("tabBox-show").removeClass("tabBox-hide").siblings().removeClass("tabBox-show").addClass("tabBox-hide")
            });

        });
    </script>
</body>

</html>