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>