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

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>jQuery tab切换</title>
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    .wrap{
    margin-left: 50px;
    margin-top: 50px;
    }
    /*清浮动---clearfix*/
    .clearfix {
    *zoom: 1;
    }
    .clearfix:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    font-size: 0;
    visibility: hidden;
    }
    .blist {
    border:1px solid #d9d9d9;
    1196px;
    height: 97px;
    }
    .blist li:first-child{
    border-left: none;
    }
    .blist li{
    list-style: none;
    170px;
    height: 97px;
    border-left:1px solid #d9d9d9;
    font-size: 26px;
    font-family: "Microsoft YaHei";
    line-height: 97px;
    color:#5A3D0A;
    background:#fff;
    text-align: center;
    float: left;
    /*鼠标样式改变为一个手*/
    cursor: pointer;
    /*字体免选中*/
    -webkit-user-select: none;

    }
    .blsit-list{
    1196px;
    }
    .blsit-list li{
    list-style: none;
    1196px;
    border:1px solid #ccc;
    height: 200px;
    border-top: none;
    }
    .wrap .blist li.active{
    color: red;
    background:#5A3D0A;
    color:#fff;
    position: relative;
    height: 97px;
    }
    .blsit-list li:first-child{
    display: block;
    }
    .blsit-list li{
    display: none;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    <ul class="blist clearfix">
    <li class="active">华中地区</li>
    <li>华东地区</li>
    <li>华北地区</li>
    <li>华南地区</li>
    <li>东北地区</li>
    <li>西南地区</li>
    <li>西北地区</li>
    </ul>
    <ul class="blsit-list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    </ul>
    </div>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $(".blist li").eq(0).css("border-left","none");
    $(".blist").on("click","li",function(){
    // 设index为当前点击
    var index = $(this).index();
    // 点击添加样式利用siblings清除其他兄弟节点样式
    $(this).addClass("active").siblings().removeClass("active");
    // 同理显示与隐藏
    $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();
    })
    })
    </script>
    </body>
    </html>

  • 相关阅读:
    EntityFramework进阶(二)- DbContext预热
    EntityFramework进阶(一)- DbContext与ObjectContext互转
    ambari集成impala
    搭建私有npm私库(使用verdaccio)
    Vue中的slot,slot-scope,v-slot
    Vue 中如何利用watch 监听对象中每一个属性的变化
    css3的counter的用法
    http请求整理
    带有过渡效果的下拉列表,下拉的内容高度不一致且不确定如何办?
    用js通过url传参把数据从一个页面传到另一个页面
  • 原文地址:https://www.cnblogs.com/lovelh/p/7263389.html
Copyright © 2011-2022 走看看