JavaScript实现Tab切换
程序员文章站
2022-04-19 22:42:12
在网页开发中，常常会遇见很多Tab切换，Tab切换增加网页浏览的舒适性，对于开发人员特别常见，本文使用JS实现tab切换效果，仅对学习中遇到的知识点做一个总结。 效果图如下： 实现思路： 1.首先使用HTML和CSS构建静态网页如上，标题使用ul-li标签，有浮动，主体使用四个大小一样的盒子，不添加 ......
在网页开发中，常常会遇见很多tab切换，tab切换增加网页浏览的舒适性，对于开发人员特别常见，本文使用js实现tab切换效果，仅对学习中遇到的知识点做一个总结。
效果图如下：
实现思路：
1.首先使用html和css构建静态网页如上，标题使用ul-li标签，有浮动，主体使用四个大小一样的盒子，不添加js时候，盒子竖直排列（很丑很丑）
2.添加js代码
2.1 首先实现标题的tab效果
2.1.1获取所有的li元素，注册鼠标进入事件，在鼠标进入事件中，清除所有的li元素样式，然后给当前li元素添加样式
2.1.2在注册事件前，给所有的li元素通过setattribute()方法给li挨个添加index属性，记录标签的序号，方便和主体div对应
2.2 实现所有的主体模块tab效果
2.2.1 获取所有的主体div，与标签进行绑定，通过getattribute()方法获得当前标签的索引，通过该索引得到div集合中与标签对应的div
代码如下：
1 <!doctype html>
2 <html>
3 <head lang="en">
4 <meta charset="utf-8">
5 <title></title>
6 <style>
7 *{
8 padding: 0px;
9 margin: 0px;
10 }
11 /* 总体大盒子 */
12 #box{
13 width: 400px;
14 height: 300px;
15 border: 1px solid gray;
16 margin: 100px auto auto;
17 }
18 /* 大盒子中头部小盒子ul */
19 #hd{
20 height: 45px;
21 }
22 /* 小盒子ul中li标签 */
23 #hd li{
24 height: 45px;
25 display: inline-block;
26 line-height: 45px;
27 width: 98px;
28 text-align: center;
29 border: 1px solid gray;
30 float: left;
31 list-style: none;
32 }
33 /* 大盒子中主体小盒子 */
34 #bd{
35 height: 255px;
36 }
37 /* 各个小版块 */
38 #bd div{
39 height: 100%;
40 display: none;
41
42 }
43
44 #bd,#hd .current{
45 display: block;
46 background-color: #eceef1;
47 }
48 </style>
49
50 </head>
51 <body>
52 <div id="box">
53 <ul id="hd">
54 <li class="current">体育</li>
55 <li>娱乐</li>
56 <li>新闻</li>
57 <li>综合</li>
58 </ul>
59
60 <div id="bd">
61 <div class="current" style="display: block;">这是体育频道</div>
62 <div>这是娱乐频道</div>
63 <div>这是新闻频道</div>
64 <div>这是综合频道</div>
65 </div>
66 </div>
67 <!-- 插入js代码 -->
68 <script>
69 // 思路:
70 // 1.实现标题小模块的tab切换
71 // 1.1 首先给所有的标题小模块清除样式
72 // 1.2 给鼠标移入的标题小模块添加样式
73 // 2.实现主体模块和标题小模块之间的绑定
74 // 2.1 给标题小模块添加一个属性index,用以记录标题小模块的索引
75 // 2.2 通过getattribute()方法得到索引,从而对应主体模块的内容
76 var hd=document.getelementbyid('hd');
77 //获得所有的标题小模块
78 var lis=hd.getelementsbytagname('li');
79 //获得所有的主体模块
80 var bd=document.getelementbyid('bd');
81 var divs=bd.getelementsbytagname('div');
82 //给所有的li注册事件
83 for(var i=0;i<lis.length;i++){
84 var li=lis[i];
85 li.setattribute('index',i);
86 li.onmouseover=function(){
87 //每次鼠标移入的时候,清除所有的小模块样式,只给当前的小模块加入样式
88 for(var i=0;i<lis.length;i++){
89 lis[i].classname="";//所有模块样式清除
90 this.classname="current";
91 //鼠标移入的时候,给所有的主体模块清除样式,然后给对应当前小模块的主体模块添加样式
92 divs[i].classname="";
93 divs[i].style.display="none";
94
95 //对当前的模块的进行操作
96 var index=parseint(this.getattribute('index'));
97 divs[index].classname="current";
98 divs[index].style.display="block";
99 }
100 }
101 }
102 </script>
103 </body>
104 </html>