快捷導(dǎo)航

JS封裝的選項(xiàng)卡TAB切換效果示例

更新時(shí)間：2016年09月20日 17:07:15 作者：webdm

這篇文章主要介紹了JS封裝的選項(xiàng)卡TAB切換效果,結(jié)合實(shí)例形式分析了javascript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性實(shí)現(xiàn)tab切換的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS封裝的選項(xiàng)卡TAB切換效果。分享給大家供大家參考，具體如下：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JS封裝的選項(xiàng)卡TAB代碼</title>
<style type="text/css">
*{ padding:0; margin:0;}
.block{ display:block;}
.none{ display:none;}
#wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}
#diya,#diyas{ list-style:none;}
#diya li,#diyas li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}
#diyas li:hover{ background:#CCC;}
#diya li.on,#diyas li.on{ background:#9C3;}
#wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}
</style>
</head>
<body>
<div id="wrap">
<ul id="diya">
<li class="on">第一項(xiàng)</li>
<li>第二項(xiàng)</li>
<li>第三項(xiàng)</li>
</ul>
<br clear="all" />
<div class="block">第一部分</div>
<div class="none">第二部分</div>
<div class="none">第三部分</div>
</div>
<div id="wraps">
<ul id="diyas">
<li class="on">第一項(xiàng)</li>
<li>第二項(xiàng)</li>
<li>第三項(xiàng)</li>
</ul>
<br clear="all" />
<div class="block">第一部分</div>
<div class="none">第二部分</div>
<div class="none">第三部分</div>
</div>
</body>
</html>
<script type="text/javascript">
tab("wrap","diya","mouseover")
tab("wraps","diyas")
function tab(wrap,navul,eve){
//tab效果封裝，目前只有兩種變換方式，一種為點(diǎn)擊事件click（也是默認(rèn)事件），另外一種為鼠標(biāo)移過(guò)事件mouseover
var divs=document.getElementById(wrap).getElementsByTagName("div");
var lis=document.getElementById(navul).getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].indx=i;
if(eve=="click" || eve==null){
lis[i].onclick=function(){
  for(i=0;i<lis.length;i++){
    
    lis[i].className="";
    divs[i].className="none"
    
    this.className="on";
    divs[this.indx].className="block";
    }
  }
}else if(eve=="mouseover"){
  lis[i].onmouseover=function(){
    for(i=0;i<lis.length;i++){
    lis[i].className="";
    divs[i].className="none";
    
    this.className="on";
    divs[this.indx].className="block";
      }
    }
  }
}
}
</script>

運(yùn)行效果圖如下：