web前端开发个人技术博客
当前位置: JavaScript > JavaScript实现tab选项卡切换的效果

JavaScript实现tab选项卡切换的效果

2018-09-25 分类:JavaScript 作者:码云 阅读(179)

今天给大家实现一个简单的需求,纯原生js实现选项卡切换的效果,即当鼠标移入某个div区域时,显示不同的内容。先来看一下效果图:

JavaScript实现选项卡切换的效果

大家先思考和分析实现思路,然后在动手实现

一、HTML页面布局

提示:

选项卡标题使用ul..li

选项卡内容使用div

二、CSS样式制作

提示:

整个选项卡的样式设置

选项卡标题的样式设置

选项卡内容的样式设置

一开始只显示一个选项卡内容,其它选项卡内容隐藏。

三、JS实现选项卡切换

提示:

获取选项卡标题和选项卡内容

选项卡内容多个,需要循环遍历来操作,得知哪个选项卡和哪个选项内容匹配

通过改变DOM的css类名称,当前点击的选项卡显示,其它隐藏。

下面是具体实现方式。

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- HTML页面布局 -->
<div id="tab-list">
<ul id="ul1">
    <li class="active">热点新闻</li>
    <li>合作播报</li>
    <li>行业资讯</li>
</ul>
<div>
<ul>
    <li><a>码云笔记:欢庆“十一”送祝福</a></li>
    <li><a>看棋牌大亨如何颠覆快播江湖</a></li>
    <li><a>解密某宝合作内幕 分成竟高达</a></li>
    <li><a>京楼盘直降5000 中信府 公园楼王现房</a></li>
</ul>
</div>
<div class="hide">
<ul>
    <li><a>收银妹代理棋牌游戏 成功晋级游戏女老板2</a></li>
    <li><a>收银妹代理棋牌游戏 成功晋级游戏女老板1</a></li>
    <li><a>IT精英放弃高薪只因想“玩”游戏</a></li>
    <li><a>瓷砖就像选好老婆 卫生间烟道的设计</a></li>
</ul>
</div>
<div class="hide">
<ul>
    <li><a>紫金阁:代理棋牌游戏如何能稳赚不亏?</a></li>
    <li><a>西3环通透22901302居限量抢购</a></li>
    <li><a>都市娱乐赚钱首选 棋牌游戏代理</a></li>
    <li><a>独家别墅280万 苏州桥2居优惠价248万</a></li>
</ul>
</div>
</div>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* CSS样式制作 */
*{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
ul{list-style-type: none;}
a{text-decoration: none;}

#tab-list{width: 275px;height:190px;margin: 20px auto;}

#ul1{border-bottom: 2px solid #8B4513;height: 32px;}
#ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
#ul1 li:hover{cursor: pointer;}
#ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}

#tab-list div{border: 1px solid #7396B8;border-top: none;}
#tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}

.show{display: block;}.hide{display: none;}

JavaScript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// JS实现选项卡切换
window.onload = function() {
var oUl1 = document.getElementById("ul1");
var aLi = oUl1.getElementsByTagName("li");
var oDiv = document.getElementById("tab-list");
var aDiv = oDiv.getElementsByTagName("div");
for(var i = 0; i &lt; aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
for(var i = 0; i &lt; aLi.length; i++) {
aLi[i].className = "";
}
this.className = "active";
for(var j = 0; j &lt; aDiv.length; j++) {
aDiv[j].className = "hide";
}
aDiv[this.index].className = "show";
}
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码云笔记。

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(6) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
6

觉得文章有用就打赏一下文章作者

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - JavaScript实现tab选项卡切换的效果

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论