zoukankan      html  css  js  c++  java
  • 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');
     });
    
  • 相关阅读:
    《剑指offer》面试题7:旋转数组的最小数字
    eclipse ------ TODO、FIXME、XXX 等任务标记
    RT-Thread ------ waitqueue
    RT-Thread ------ 设备注册
    ubuntu 安装 glibc
    openwrt上面移植MQTT代码
    MH5000-31模组无法识别SIM卡
    "Hello osmdroid World"手机GPS轨迹数据
    地质数据下载
    绘图软件Surfer绘制等高线
  • 原文地址:https://www.cnblogs.com/zhuxiang1633/p/11719646.html
Copyright © 2011-2022 走看看