javascript标签页切换功能（极简代码） 

 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>

 

posted @ 2018-03-06 11:08  boss爱国  阅读(342)  评论(0)    收藏  举报