1 <!doctype html>
2 <html lang="en">
3 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
4 <head>
5 <meta charset="UTF-8">
6 <title>boss爱国</title>
7 <style>
8 body{background:#ececec;margin:0;}
9 #test{width:100%;height:40px;background:#fff;}
10 .btn{padding:11px 16%;float:left;list-style:none;}
11 .focus{border-bottom:1px solid #269be8; color:#269be8;}
12 .line{width: 1px;text-indent: -10000px;border-right: 1px solid #ccc;height: 28px;float:left;margin-top:3px;}
13 .content{padding:4%;display:none;}
14 </style>
15 </head>
16 <body>
17 <div id='test'>
18 <li id='btn_1' onclick='switchTab(1)' style='padding:11px 16%;float:left;list-style:none;' class='focus'>毛**语录</li>
19 <li class='line'>|</li>
20 <li id='btn_2' class='btn' onclick='switchTab(2)' style='padding:11px 16%;float:left;list-style:none;'>共**宣言</li>
21 </div>
22 <div id='con_1' class='content' style='display:block'>
23 《毛**语录》，是二十世纪六十年代初编辑出版、风靡全国乃至世界的毛**主席名言警句选编本，发行量达50亿册，位居世界第二。因为最流行的版本用红色封面包装，又是红色领袖的经典言论，所以文化大革命中被普遍称为“红宝书”。
24 </div>
25 <div id='con_2' class='content'>
26 《共**宣言》，是卡尔·马克思和费里德里希·恩格斯为共产主义者同盟（Communist League）起草的纲领，国际共产主义运动第一个纲领性文献，阐述了阶级矛盾对人类历史的影响，...
27 </div>
28 </body>
29 <script type="text/javascript">
30 function switchTab(n){
31 for(var i = 1; i <= 2; i++){
32 document.getElementById("btn_" + i).className = ""; //先把所有的按钮的class设为0，
33 document.getElementById("con_" + i).style.display = "none"; //把所有的内容隐藏
34 }
35 document.getElementById("btn_" + n).className = "focus"; //为点击的按钮加上样式
36 document.getElementById("con_" + n).style.display = "block"; //显示点击的内容
37 }
38 </script>
39 </html>
