<html> <head> <meta charset="UTF-8"> <title>选项卡</title> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> </head> <style> .tab{width:400px;height:400px;border:1px solid red;} .tab-menu {height:100px;width:400px;border:1px solid grey;} .tab-menu ul{list-style:none;} .tab-menu li{display:block;width:30%;float:left;border:1px solid blue;} .tab-box div{width:400px;height:300px;border:1px solid #ff4200 ; display : none ; } /* Let the first box show up */ .tab-box div:first-Child { display : block ; } /* Change the style when the tab is selected */ .change { background : red ; } </ style > < script > $().ready( function (){ $( " .tab-menu li " ).mouseover( function (){ // Get the element subscript through the .index() method, starting from 0, and assign it to a variable var _index = $( this ).index() ; // Show the _index of the content box and hide the rest $( " .tab-box>div " ).eq(_index).show().siblings().hide(); // change The style of the option box when selected, remove the styles of several other options $( this ).addClass( " change " ).siblings().removeClass( " change " ); }); }); </script> <body> <div class="tab"> <div class="tab-menu"> <ul> <li>新服</li> <li>爆服</li> <li>大服</li> </ul> </div> <div class="tab-box"> <div>123</div> <div>456</div> <div>789</div> </div> </div> </body> </html>