欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 封裝一個(gè)tab效果源碼分享

 更新時(shí)間：2015年09月15日 12:12:21   投稿：mrr  
本文給大家分享javascript封裝一個(gè)tab效果源碼分享，感興趣的朋友一起來看看吧

效果圖如下：

查看演示  源碼下載

html代碼

<!DOCTYPE html>
<html>
<head>
<title>tab測(cè)試</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-" />
<link href="css/tab.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/tab-min.js"></script>
</head>
<body>
<div id="tab">
 <!-- tabHead -->
 <ul class="tab-nav">
 <li><a href="javascript:void()">交易安全</a></li>
 <li><a href="javascript:void()">淘寶大學(xué)</a></li>
 <li><a href="javascript:void()">愛心</a></li>
 </ul>
 <!-- tabPanel-->
 <ul class="tab-bd">
 <li></li>
 <li></li>
 <li></li>
 </ul>
</div>
<script type="text/javascript">
tabPanel({"panel":"tab"});//panel為必填項(xiàng)，default、defalutStyle、hoverStyle為選填項(xiàng)
</script>
</body>
</html>

js代碼

function tabPanel(param){
 var defaultIndex=param["default"]||,//設(shè)置顯示的頁面
 panelobj=param["panel"],//設(shè)置tab容器
 defalutClass=param["defalutStyle"]||"",//設(shè)置tab菜單項(xiàng)的普通樣式
 hoverClass=param["hoverStyle"]||"hover",//設(shè)置鼠標(biāo)移到tab菜單項(xiàng)的樣式
 currentIndex=defaultIndex,
 menus=_$(panelobj).getElementsByTagName("ul")[].getElementsByTagName("li"),
 contents=_$(panelobj).getElementsByTagName("ul")[].getElementsByTagName("li"),
 menuNumber=menus.length,
 hidden="hidden";
 for(var i=;i<menuNumber;i++){
 _setClass(contents[],hoverClass);
 _setClass(contents[i],hidden);
 _setClass(menus[i],defalutClass);
 (function(i){
 menus[i].onmouseover=function(){
 var old=menus[currentIndex];
 _setClass(old,defalutClass);
 _setClass(contents[currentIndex],hidden);
 var cur=menus[i];
 _setClass(cur,hoverClass);
 currentIndex=i;
 _setClass(contents[i],"");
 };
 })(i);
 }
 _setClass(menus[currentIndex],hoverClass);
 _setClass(contents[currentIndex],"");
 //便利函數(shù)
 function _setClass(obj,className){obj.className=className}
 function _$(oid){return typeof(oid) == "string"?document.getElementById(oid):oid}
}

css代碼

#tab{border:px solid #ccc;}
#tab .tab-bd{border-top:none;margin: auto;padding:px;text-align:left;height:px;position:relative}
.tab-nav{margin: auto;padding:;background:#eee;height:px;}
.tab-nav li{display:inline;list-style:none outside none;width:px;height:px;float:left;line-height:px;text-align:center;}
.tab-nav li a{color:#;display:inline-block}
.tab-nav li a:hover,.tab-nav li.hover a{text-decoration:none;background:#fff;color:#;display:block; }
.hidden{display:none}

相關(guān)文章

最新評(píng)論