jq实现的选项卡

最新推荐文章于 2024-03-18 18:47:22 发布

mangxi8200

最新推荐文章于 2024-03-18 18:47:22 发布

阅读量746

点赞数

分类专栏：学习demo 文章标签： jq

本文链接：https://blog.csdn.net/mangxi8200/article/details/79273143

版权

学习demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：
这里写图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>custom_tab</title>
    <style>
        .tab_box{
            width: 50%;
            margin: 40px auto;
            border: 1px solid rgba(146, 141, 161, 0.64);
            position: relative;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
        }
        .tab_menu_box>span{
            display: inline-block;
            width: 25%;
            text-align: center;
            background-color: #fff;
            color: #8c8c8c;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }
        .tab_menu_box>span:first-child{
            border-top-left-radius: 6px;
        }
        .tab_menu_box>span:last-child{
            border-top-right-radius: 6px;
        }

        .tab_menu_active{
            background-color: #2c86c4 !important;
            color: #fff !important;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
        }
        .tab_content_box{
            position: relative;
            height: 220px;
        }
        .tab_content{
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
        }
        .tab_content{
            position: relative;
            top: 0;
            left: 0;
            display: none;
            height: 100%;
            background-color: #e9f2fb;
            line-height: 26px;
            font-size: 14px;
            color: #666;
            text-indent: 1em;
        }
        .tab_content_active{
            display: block;
        }
    </style>
</head>
<body>
<div class="tab_box">
    <div class="tab_menu_box">
        <span class="tab_menu tab_menu_active" data-index = "0">生活</span><!--
        --><span class="tab_menu" data-index = "1">娱乐</span><!--
        --><span class="tab_menu" data-index = "2">旅游</span><!--
        --><span class="tab_menu" data-index = "3">学习</span>
    </div>
    <div class="tab_content_box">
        <div class="tab_content tab_content_active">生活</div>
        <div class="tab_content">娱乐</div>
        <div class="tab_content">旅游</div>
        <div class="tab_content">学习</div>
    </div>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script>
    var tab_content = $(".tab_content");
    $(".tab_menu").click(function () {
        var index = $(this).data("index");
        $(this).siblings().removeClass("tab_menu_active");
        $(this).addClass("tab_menu_active");
        $(tab_content).removeClass("tab_content_active");
        $(tab_content[index]).addClass("tab_content_active");
    });
</script>
</body>
</html>

mangxi8200

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq实现的选项卡

效果图：代码如下：html lang="en">head> meta charset="UTF-8"> title>custom_tabtitle> style> .tab_box{ width: 50%; margin: 40px auto; border: 1px
复制链接

扫一扫

专栏目录