JS 实现teb 标签选项切换实例

 

一、HTML页面布局

提示:

选项卡标题使用ul..li

选项卡内容使用div

二、CSS样式制作

提示:

整个选项卡的样式设置

选项卡标题的样式设置

选项卡内容的样式设置

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

三、JS实现选项卡切换

提示:

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

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

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

下面是具体实现方式。

HTML代码：

1. <!-- HTML页面布局 -->

2. <div id="tab-list">

3. <ul id="ul1">

4. <li class="active">热点新闻</li><li>合作播报</li><li>行业资讯</li>

5. </ul>

6. <div>

7. <ul>

8. <li><a href="javascript:;">码云笔记：欢庆“十一”送祝福</a></li>

9. <li><a href="javascript:;">看棋牌大亨如何颠覆快播江湖</a></li>

10. <li><a href="javascript:;">解密某宝合作内幕 分成竟高达</a></li>

11. <li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>

12. </ul>

13. </div>

14. <div class="hide">

15. <ul>

16. <li><a href="javascript:;">收银妹代理棋牌游戏 成功晋级游戏女老板2</a></li>

17. <li><a href="javascript:;">收银妹代理棋牌游戏 成功晋级游戏女老板1</a></li>

18. <li><a href="javascript:;">IT精英放弃高薪只因想“玩”游戏</a></li>

19. <li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>

20. </ul>

21. </div>

22. <div class="hide">

23. <ul>

24. <li><a href="javascript:;">紫金阁：代理棋牌游戏如何能稳赚不亏？</a></li>

25. <li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>

26. <li><a href="javascript:;">都市娱乐赚钱首选 棋牌游戏代理</a></li>

27. <li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>

28. </ul>

29. </div>

30. </div>

CSS代码：

1. /* CSS样式制作 */

2. *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}

3. ul{list-style-type: none;}

4. a{text-decoration: none;}

5.  

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

7.  

8. #ul1{border-bottom: 2px solid #8B4513;height: 32px;}

9. #ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}

10. #ul1 li:hover{cursor: pointer;}

11. #ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}

12.  

13. #tab-list div{border: 1px solid #7396B8;border-top: none;}

14. #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}

15.  

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

JavaScript代码：

1. // JS实现选项卡切换

2. window.onload = function() {

3. var oUl1 = document.getElementById("ul1");

4. var aLi = oUl1.getElementsByTagName("li");

5. var oDiv = document.getElementById("tab-list");

6. var aDiv = oDiv.getElementsByTagName("div");

7. for(var i = 0; i < aLi.length; i++) {

8. aLi[i].index = i;

9. aLi[i].onmouseover = function() {

10. for(var i = 0; i < aLi.length; i++) {

11. aLi[i].className = "";

12. }

13. this.className = "active";

14. for(var j = 0; j < aDiv.length; j++) {

15. aDiv[j].className = "hide";

16. }

17. aDiv[this.index].className = "show";

18. }

19. }

20. }