随笔- 77 文章- 0 评论- 1 阅读- 73128

自定义属性tab复制就可以用把Jquery.js路劲换一下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .tab {

        }
        .tab-son1 {
            overflow: hidden;
        }
        .tab-son1 .tab-son1-son{
            float: left;
            margin-left: 20px;
            padding: 5px 15px;
            /*background: red;*/
            cursor: pointer;
            text-align: center;
        }
        .tab-son2 {
            margin-top: 60px;
        }
        .tab-son2 .tab-son2-son {
            display: none;
        }
        .tab-son2 .tab-son2-sonactive {
            display: block;
        }
        .tab .tab-son1 .tab-son1-sonactive{
            background: red;
            color: #fff;
        }
    </style>
</head>
<body>
<div id="text" value="123" data-name="黑哒哒的盟友"></div>

<div class="tab">
    <div class="tab-son1">
        <span class="tab-son1-son tab-son1-sonactive" data-id="one">tab1</span>
        <span class="tab-son1-son " data-id="two">tab2</span>
        <span class="tab-son1-son" data-id="three">tab3</span>
    </div>
    <div class="tab-son2">
            <div class="tab-son2-son tab-son2-sonactive tab-son2-son1" id="one">第一个内容</div>
            <div class="tab-son2-son tab-son2-son2" id="two">第2个内容</div>
            <div class="tab-son2-son tab-son2-son3" id="three">第3个内容</div>
    </div>
</div>

<script src="./jquery-3.3.1.js"></script>
<script>
    console.log($("#text").data("name"));

    $('.tab .tab-son1  .tab-son1-son').click(function () {
        $(this).addClass('tab-son1-sonactive').siblings().removeClass('tab-son1-sonactive');
        $('.tab-son2 .tab-son2-son').hide();
        $('#'+$(this).data('id')).show();
    });
</script>
</body>
</html>