动态实现选项卡的切换 代码实现如下：
<style> *{padding:0px;margin:0px} body{padding:50px} #nav{list-style-type: none;height: 30px;} #nav li{width: 100px;height: 30px;line-height: 30px;border: 1px solid green;float: left;box-sizing: border-box;cursor: pointer;text-align: center;} #nav li:nth-child(2){border-width: 1px 0px 1px 0px;} #box div{width: 300px;height: 150px;border: 1px solid green;box-sizing: border-box;border-top: none;display: none;background:rgba(182,165,165,0.5)} #box .show{display: block;} #nav .active{background:rgba(182,165,165,0.5);border-bottom: none;} #nav li:hover{background:rgba(182,165,165,1);} </style> <body> <ul id="nav"> <li class="active">第一部分</li> <li>第二部分</li> <li>第三部分</li> </ul> <div id="box"> <div class="show"></div> <div></div> <div></div> </div> <script> $(function(){ $li=$('#nav li') $li.click(function(){ $(this).addClass('active').siblings().removeClass('active') $('#box div').eq($(this).index()).css('display','block') .siblings().css('display','none') }) }) </script> </body>