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>

  • 相关阅读:
    static final常量变量的正确书写规范
    Why aren't more desktop apps written with Qt?(quora.com系列文章)
    建议学个一知半解的时候,再看书
    C++中new和delete的背后(最后还是调用了MSVCR90的malloc)
    关于Qt的事件循环以及QEventLoop的简单使用(QEventLoop::quit()能够终止事件循环,事件循环是可以嵌套的)
    QProcess::startDetached(5.10有了一种新的方式)
    微信公众号支付开发
    Middleware

    TOKEN+签名验证
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/12204987.html
Copyright © 2011-2022 走看看