• jquery实现常用UI布局


    tab

    • html
    <div class="tab">
        <ul class="tab-title">
            <li class="tab-this">item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
        <div class="tab-content">
            <div class="tab-item show">item1xxx</div>
            <div class="tab-item">item2xxx</div>
            <div class="tab-item">item3xxx</div>
        </div>
    </div>
    
    • css
    *{
        padding: 0; margin: 0; text-decoration: none; list-style: none;
        font-family: Consolas;
    }
    .tab{
        margin: 20px;
    }
    /*tab-title*/
    .tab-title {
        height: 40px;
        position: relative;
        left: 0;
        white-space: nowrap;
        border-bottom- 1px;
        border-bottom-style: solid;
        border-color: #e2e2e2;
        transition: all .2s;
        -webkit-transition: all .2s;
    }
    .tab-title>li{
        display: inline-block;
        padding: 0 15px;
        text-align: center;
        cursor: pointer;
        line-height: 40px;
        min- 65px;
        position: relative;
    }
    .tab-title .tab-this:after {
        position: absolute;
        left: 0;
        top: 0;
        content: '';
         100%;
        height: 41px;
        border- 1px;
        border-style: solid;
        border-color: #e2e2e2;
        border-bottom-color: #fff;
        border-radius: 2px 2px 0 0;
        box-sizing: border-box;
        pointer-events: none;
    }
    .tab-item{
        display: none;
    }
    .show{
        display: block !important;
    }
    
    • js
    $('body').on('click','.tab-title>li:not(.tab-this)', function(){
         $(this).siblings().removeClass('tab-this');
         $(this).addClass('tab-this');
         var index = $(this).prevAll().length+1;
         $('.tab-content>div').removeClass('show');
         $('.tab-content>div:nth-child('+index+')').addClass('show');
     });
    
  • 相关阅读:
    Echarts之内嵌圆环图v5.1.2
    VueX+VueRouter+Cookie实现简单登录页
    命令行安装MySQL
    mysql常用语句
    网际互联及OSI七层模型:
    阿里ICON图标,使用教程
    前端开发小技巧整理
    SQL语句
    web笔记
    jQuery
  • 原文地址:https://www.cnblogs.com/zhuxiang1633/p/11719646.html
Copyright © 2020-2023  润新知