zoukankan      html  css  js  c++  java
  • 选项卡

    HTML


    <div class="affix">
    <h3>用户中心</h3>
    <ul>
    <li class="active"><a href="#container-my-order">我的订单</a></li>
    <li><a href="#container-buy-stat-canvas">消费统计(原生版)</a></li>
    <li><a href="#container-buy-stat-svg">消费统计</a></li>
    <li><a href="#container-luck-lottery">幸运抽奖</a></li>
    </ul>
    </div>
    <!--右侧占全部-->
    <div class="right">
    <div id="container-my-order" class="active">我的订单</div>
    <div id="container-buy-stat-canvas">消费统计</div>
    <div id="container-buy-stat-svg">消费统计</div>
    <div id="container-luck-lottery">幸运抽奖</div>

    </div>

    CSS
    .affix{
    float: left;
    210px;
    min-height: 200px;
    padding: 1em;
    }
    .right{
    margin-left: 210px;
    min-height: 200px;
    padding: 1em;
    }
    .affix li{
    line-height: 2em;
    padding: 1em;
    }
    .affix li.active>a{
    color: #E4393C;
    font-weight: bold;
    }
    .right div.active{
    display: block;
    }
    .right div{
    display: none;
    }

    JQ
    $(".affix>ul").on('click','a',function(e){
    e.preventDefault();
    $(this).parent().addClass('active').siblings().removeClass('active');
    $id=$(this).attr('href');
    $($id).addClass('active').siblings().removeClass('active');
    })

    效果

    
    
  • 相关阅读:
    《大型网站技术架构》读后感
    质量属性
    课堂作业02
    课堂作业01
    《软件构架实践》读后感06
    《软件构架实践》读后感05
    Storm系列三: Storm消息可靠性保障
    Storm系列二: Storm拓扑设计
    Storm系列一: Storm初步
    网络层协议
  • 原文地址:https://www.cnblogs.com/liangfc/p/7392662.html
Copyright © 2011-2022 走看看