zoukankan      html  css  js  c++  java
  • jQuery---tab栏切换

    tab栏切换

    <!DOCTYPE html>
    <html>
    
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
    
        ul {
          list-style: none;
        }
    
        .wrapper {
          width: 1000px;
          height: 475px;
          margin: 0 auto;
          margin-top: 100px;
        }
    
        .tab {
          border: 1px solid #ddd;
          border-bottom: 0;
          height: 36px;
          width: 320px;
        }
    
        .tab li {
          position: relative;
          float: left;
          width: 80px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          cursor: pointer;
          border-top: 4px solid #fff;
        }
    
        .tab span {
          position: absolute;
          right: 0;
          top: 10px;
          background: #ddd;
          width: 1px;
          height: 14px;
          overflow: hidden;
        }
    
        .products {
          width: 1002px;
          border: 1px solid #ddd;
          height: 476px;
        }
    
        .products .main {
          float: left;
          display: none;
        }
    
        .products .main.selected {
          display: block;
        }
    
        .tab li.active {
          border-color: red;
          border-bottom: 0;
        }
      </style>
      <script src="../jquery-1.12.4.js"></script>
      <script>
        $(function () {
          $(".tab-item").mouseenter(function () {
            //两件事件 1.给当前的选中增加active的样式同时移除兄弟的active样式
            //2. tab选中的时候,获取索引,给对应的产品div增加样式并移除兄弟的样式
            $(this).addClass("active").siblings().removeClass("active");
            var idx = $("this").index();
            $(".main").eg(idx).addClass("selected").siblings().removeClass("selected");
          })
        }) ;
      </script>
    
    </head>
    
    <body>
      <div class="wrapper">
        <ul class="tab">
          <li class="tab-item active">国际大牌<span></span></li>
          <li class="tab-item">国妆名牌<span></span></li>
          <li class="tab-item">清洁用品<span></span></li>
          <li class="tab-item">男士精品</li>
        </ul>
        <div class="products">
          <div class="main selected">
            <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
          </div>
          <div class="main">
            <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
          </div>
          <div class="main">
            <a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
          </div>
          <div class="main">
            <a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
          </div>
        </div>
      </div>
    
    </body>
    
    </html>

  • 相关阅读:
    String类可以被继承吗?我们来聊聊final关键字!
    微信小程序中使用阿里ICON图标
    兼容iphone x刘海的正确姿势
    解决ios下部分手机在input设置为readonly属性时,依然显示光标
    react jsx 中使用 switch case 示例
    react 中使用 JsBarcode 显示条形码
    解决IDEA输入法输入中文候选框不显示问题
    svn提交代码失败提示清理(清理失败并且报错信息乱码解决办法)
    css笔记
    修改Mysql数据库的字符集
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/12204987.html
Copyright © 2011-2022 走看看