原生JavaScript实现选项卡切换功能详解

选项卡效果预览

首先展示最终实现的交互效果：

HTML结构搭建

第一步，构建HTML页面结构。

<!-- HTML页面布局 -->
<ul class="tab_menu">
 <li class="selected">房产</li>
 <li>家居</li>
 <li>二手房</li>
</ul>
<div class="tab_box">
 <div> 275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
 北京首现零首付楼盘 53万购东5环50平
 京楼盘直降5000 中信府 公园楼王现房</div>
 <div class="hide">40平出租屋大改造 美少女的混搭小窝
 经典清新简欧爱家 90平老房焕发新生
 新中式的酷色温情 66平撞色活泼家居
 瓷砖就像选好老婆 卫生间烟道的设计</div>
 <div class="hide"> 通州豪华3居260万 二环稀缺2居250w甩
 西3环通透2居290万 130万2居限量抢购
 黄城根小学学区仅260万 121平70万抛!
独家别墅280万 苏州桥2居优惠价248万</div>
</div> 

CSS样式设计

第二步，编写CSS样式以定义外观与布局。

/* CSS样式制作 */ 
*{
font-size:14px;
 font-weight:bold; 
}
 .tab_menu{
 list-style:none; 
margin-left:-35px;
 }
 li{
 float:left;
 /*遮不住底部边的位置，怎么解决？*/
border:1px solid grey;
 border-bottom:none;
 margin-bottom:-3px;
 margin-right:3px;
 width:70px;
 text-align:center;
 padding:7px 0;
 }
 li:hover{
 cursor:pointer;
 }
 .tab_box{
 clear:both;
 width:250px;
 border:1px solid blue;
 border-top:2px solid red;
 }
 .selected{
 background-color:white;
 border-top:2px solid red;
 }
 .tab_box{
 padding:10px 80px 0 10px;
 height:170px;
 }
 .tab_box div{
 height:150px;
 line-height:30px;
 }
 .hide{
 display:none;
 } 

JavaScript交互逻辑

第三步，使用JavaScript逻辑实现选项卡切换功能。

var ul=document.getElementsByClassName("tab_menu"),
　　liArr=ul[0].getElementsByTagName("li"),
　　div=document.getElementsByClassName("tab_box"),
　　divArr=div[0].getElementsByTagName("div");

 function sibling(element){
　　var a=[];
　　var p=element.parentNode.children;
　　for(var i=0;i<p.length;i++){
　　　　if(p[i]!==element) a.push(p[i]);
　　}
 
　　return a;
 }
 
for(var i=0;i<liArr.length;i++){
　　liArr[i].index=i;
　　liArr[i].onclick=function(){
　　　　this.className="selected"; 
　　　　var otherLiArr=sibling(this); 
　　　　for(var j=0;j<otherLiArr.length;j++){
　　　　　　otherLiArr[j].className="";
　　　　} 

　　　　for (var z = 0; z < divArr.length; z++) {
　　　　　　divArr[z].className="hide";
　　　　}
　　　　divArr[this.index].className="";
　　}
 }

相关资源推荐

相关资源推荐：javascript选项卡操作方法汇总 jQuery选项卡操作方法汇总

总结

以上内容为本文全部知识点，希望能为读者提供学习参考，欢迎继续支持本站。