<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.3.1.js"></script> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .tab{ margin: 50px auto; width: 1000px; height: 520px; } .tab-t{ width: 360px; height: 45px; border: 1px solid #eee; } .tab-t li{ width: 90px; height: 45px; line-height: 45px; text-align: center; position: relative; float: left; border-top: 4px solid #fff; cursor: pointer; } .tab-t li span{ position: absolute; top: 0; right: 0; color: #eee; } .tab-t li.current{ border-top-color: red; } .tab-b{ height: 475px; border-top: 1px solid #eee; } .tab-b div{ display: none; } .tab-b .selected{ display: block; } </style> <script> $(function () { $("#tab_t li").mouseenter(function () { var index = $(this).index(); $(this).addClass("current").siblings("li").removeClass("current"); $("#tab_b div:eq("+index+")").addClass("selected").siblings("div").removeClass("selected"); }) }) </script> </head> <body> <div class="tab"> <div class="tab-t" id="tab_t"> <ul> <li class="current">国际大牌<span>|</span></li> <li>国装名牌<span>|</span></li> <li>清洁用品<span>|</span></li> <li>男士精品</li> </ul> </div> <div class="tab-b" id="tab_b"> <div class="selected"> <a href="#"><img src="guojidapai.jpg" alt=""/></a> </div> <div> <a href="#"><img src="guozhuangmingpin.jpg" alt=""/></a> </div> <div> <a href="#"><img src="qingjieyongpin.jpg" alt=""/></a> </div> <div> <a href="#"><img src="nanshijingpin.jpg" alt=""/></a> </div> </div> </div> </body> </html>
