A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

4张图片自己找几张替换在对应文件,引入对应的js文件



  • <!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 () {



  •         //两件事件



  •         $(this).addClass("active").siblings().removeClass("active");



  •         var idx = $(this).index();



  •         $(".main").eq(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>





0 个回复

您需要登录后才可以回帖 登录 | 加入黑马