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

Posted bossaiguo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于javascript标签页切换功能(极简代码)的主要内容,如果未能解决你的问题,请参考以下文章

利用jQuery极简代码完成选中部分高亮显示效果

极简代码搞定视频剪辑

Python入门30个Python常用极简代码,现拿现用

Python入门30个Python常用极简代码,现拿现用

LeetCode 1700. 无法吃午餐的学生数量:真假模拟(极简代码) + 奇技淫巧

Python工程师Java之路(v)Socket极简代码