zoukankan      html  css  js  c++  java
  • 案例2:tab栏切换

    <style>
    body,ul,li,div{margin:0;padding: 0;}
    ul{font-size: 0px;}
    .tab_list{
      border: 1px gray solid;
       400px;height: 50px;
      background: gainsboro;
    }
    ul li{
      list-style: none;display: inline-block;
      text-align: center;font-size: 14px;
       32.8%;line-height: 50px;
    }
    .tab_con{400px;height:120px;
      border: 1px solid gainsboro;border-top: 0px;
    }
    .tab_con .item{display: none;text-indent: 14px;
      line-height: 28px; font-size: 18px;
    }
    .current{color:snow;background:plum;}
    </style>
    <script>
    $(function(){
      $(".tab_list ul li").mouseover(function(){
      var inds=$(this).index();  // 获取当前 li 的序号
      $(this).addClass("current").siblings().removeClass("current");   //给当前的 li 添加 current 的样式,其他兄弟 li 去掉 current 的样式
      $(".tab_con div").eq(inds).show().siblings().hide();   // li 对应的 div显示出来,其他兄弟 div 隐藏
      })
    })
    </script>
    </head>
    <body>
    <div class="tab_list">
      <ul>
        <li class="current">tab一</li>
        <li>tab二</li>
        <li>tab三</li>
      </ul>
    </div>
    <div class="tab_con">
      <div class="item" style="display: block">
        tab一的内容
      </div>
      <div class="item">
        tab二的内容
      </div>
      <div class="item">
        tab三的内容
      </div>
    </div>
  • 相关阅读:
    js循环小练习
    计算字符串字节数
    查找最小值
    js文本复制插件&vue
    python打包成exe(py2exe)
    window2008 64位系统没有office组件问题分析及解决
    js onchange事件
    input file里的JQ change() 事件的只生效一次
    powerdesign的license key到期,解决办法
    JQuery好用的日期选择控件 DatePicker
  • 原文地址:https://www.cnblogs.com/qtbb/p/11332876.html
Copyright © 2011-2022 走看看