• 自定义属性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>
  • 相关阅读:
    还不知道spring的RestTemplate的妙用吗
    【学习笔记】机器学习之特征工程
    《饥饿的盛世》总结
    我是如何解决java.security.cert.CertPathValidatorException异常的
    《机器学习
    2018年总结
    元类实现ORM
    元类
    python中的装饰器
    python中的闭包
  • 原文地址:https://www.cnblogs.com/shenbo666/p/9699233.html
Copyright © 2020-2023  润新知