html 代码和 jquery 代码。
<html> <head> <title>tab</title> </head> <body> <div class="header"> <ul class="tab"> <li>主题</li> <li>文字</li> <li>音乐</li> <li>书籍</li> </ul> </div> <div class="container"> <div class="tab1">11111111111111</div> <div class="tab2">22222222222222</div> <div class="tab3">33333333333333</div> <div class="tab4">44444444444444</div> </div> </body> <script src="style/jquery2.1.min.js"></script> <script type="text/javascript"> $(function(){ var tab_li=$(".tab li"); tab_li.click(function(){ var li_index=tab_li.index(this); //alert(li_index); $('div.container>div').eq(li_index).show() .siblings().hide(); }) }) 1.获取标题 2.点击标题触发函数 3.获取当前点击的标题的索引值 4.检测是否获得成功 5.获取所有要切换的tab页面 根据索引值eq（）使对应的tab页面显示 其他所有兄弟元素隐藏 </script> </html>
css代码根据自己所需而改变。
<style type="text/css"> *{margin: 0;padding: 0;} ul li{list-style: none;} .header{width: 100%;height: 80px;background-color: black;} .tab{margin-left:40%;} .tab li{width:40px;height:50px;float: left;background: #fff;margin:10px;margin-left: 10px;text-align: center;line-height: 50px;} .container{width: 100%;} .tab1,.tab2,.tab3,.tab4{height: 500px;background: #ada;} .tab2,.tab3,.tab4{display: none;} </style>
具体就这样，有点丑。
