javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js选项卡切换

轻松实现js选项卡切换效果

作者:湘湘_Saling

这篇文章主要帮助大家轻松实现js选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

这是要实现的效果图:

一.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样式制作 */ 
*{
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;
 } 

三.JS实现选项卡切换 

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选项卡操作方法汇总

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

您可能感兴趣的文章:
阅读全文