⽤html+css+js实现选项卡切换效果
实现⼀个新闻门户⽹站上的常见选项卡效果：
⽂字素材:
房产：
275万购昌平邻铁三居总价20万买⼀居
200万内购五环三居 140万安家东三环
北京⾸现零⾸付楼盘 53万购东5环50平
京楼盘直降5000 中信府公园楼王现房
家居:
40平出租屋⼤改造美少⼥的混搭⼩窝
经典清新简欧爱家 90平⽼房焕发新⽣
新中式的酷⾊温情 66平撞⾊活泼家居
瓷砖就像选好⽼婆卫⽣间烟道的设计
⼆⼿房：
通州豪华3居260万⼆环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根⼩学学区仅260万 121平70万抛!
独家别墅280万苏州桥2居优惠价248万
⼀、HTML页⾯布局
HTML显⽰的是所有与⽂字有关的信息，所以在这个页⾯中与⽂字有关的信息为上⾯选项卡的三个标题，以及选项卡的内容。
于是决定标题使⽤<ul> <li>布局，内容使⽤<div>布局。
CSS样式
要制作成上图所⽰的选项卡样式，⼏个地⽅需要注意：
1、整个选项卡的样式设置
2、选项卡标题的样式设置
3、选项卡内容的样式设置
4、只能显⽰⼀个选项卡的内容，其他选项卡内容隐藏。
JavaScript实现选项卡切换
1、⾸先需要获取选项卡标题和选项卡内容
2、选项卡内容有三个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配。
3、通过改变DOM的css类名称，当前点击的选项卡显⽰，其它隐藏。
完整代码：
1<!DOCTYPE html>
2<html>
3<head lang="en">
4<meta charset="UTF-8">
5<title>选项卡</title>
6<style type="text/css">
7/* CSS样式制作 */
8    *{padding:0px; margin:0px;}
9      a{ text-decoration:none; color:black;}  //消除链接的下划线
10      a:hover{text-decoration:none; color:#336699;}
11      #tab{width:270px; padding:5px;height:150px;margin:20px;}
12      #tab ul{list-style:none; display:;height:30px;line-height:30px; border-bottom:2px #C88 solid;}
13      #tab ul li{background:#FFF;cursor:pointer;float:left;list-style:none height:29px; line-height:29px;padding:0px 10px; margin:0px 10px; border:1px solid #BBB; border-bottom:2px solid #C88;}
14      #tab {border-top:2px solid Saddlebrown; border-bottom:2px solid #FFF;}
15      #tab div{height:100px;width:250px; line-height:24px;border-top:none;  padding:1px; border:1px solid #336699;padding:10px;}
css特效文字16      .hide{display:none;}
17</style>
18
19<script type="text/javascript">
20// JS实现选项卡切换
21    load = function(){
22var myTab = ElementById("tab");    //整个div
23var myUl = ElementsByTagName("ul")[0];//⼀个节点
24var myLi = ElementsByTagName("li");    //数组
25var myDiv = ElementsByTagName("div"); //数组
26
27for(var i = 0; i<myLi.length;i++){
28        myLi[i].index = i;
29        myLi[i].onclick = function(){
30for(var j = 0; j < myLi.length; j++){
31                myLi[j].className="off";
32                myDiv[j].className = "hide";
33            }
34this.className = "on";
35            myDiv[this.index].className = "show";
36        }
37      }
38    }
39</script>
40
41</head>
42<body>
43<!-- HTML页⾯布局 -->
44<div id = "tab">
45<ul>
46<li class="off">房产</li>
47<li class="on">家居</li>
48<li class="off">⼆⼿房</li>
49</ul>
50<div id="firstPage" class="hide">
51<a href = "#">275万购昌平邻铁三居总价20万买⼀居</a><br/> 52<a href = "#">200万内购五环三居 140万安家东三环</a><br/> 53<a href = "#">北京⾸现零⾸付楼盘 53万购东5环50平</a><br/> 54<a href = "#">京楼盘直降5000 中信府公园楼王现房</a><br/> 55</div>
56<div id="secondPage" class="show">
57<a href = "#">40平出租屋⼤改造美少⼥的混搭⼩窝</a><br/> 58<a href = "#">经典清新简欧爱家 90
平⽼房焕发新⽣</a><br/> 59<a href = "#">新中式的酷⾊温情 66平撞⾊活泼家居</a><br/> 60<a href = "#">瓷砖就像选好⽼婆卫⽣间烟道的设计</a><br/> 61</div>
62<div id="thirdPage" class = "hide">
63<a href = "#">通州豪华3居260万⼆环稀缺2居250w甩</a><br/> 64<a href = "#">西3环通透2居290万 130万2居限量抢购</a><br/> 65<a href = "#">黄城根⼩学学区仅260万 121平70万抛!</a><br/> 66<a href = "#">独家别墅280万苏州桥2居优惠价248万</a><br/> 67</div>
68</div>
69
70</body>
71</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。