码迷,mamicode.com
首页 > 编程语言 > 详细

javascript标签页切换功能(极简代码)

时间:2018-03-06 11:28:22      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:内容   rip   type   gpo   get   post   order   lang   pad   

技术分享图片

 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>

 

javascript标签页切换功能(极简代码)

标签:内容   rip   type   gpo   get   post   order   lang   pad   

原文地址:https://www.cnblogs.com/bossaiguo/p/8513244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!