信鸽网

JavaScript 封装一个tab效果源码分享

  作者：bea

效果图如下： 查看演示 源码下载 html代码 <!DOCTYPE html><html><head><title>tab测试</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-" /><link href="css/tab.css" rel="stylesheet" type="text/css"

效果图如下：



查看演示  源码下载


html代码





<!DOCTYPE html>

<html>

<head>

<title>tab测试</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()">淘宝大学</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为必填项，default、defalutStyle、hoverStyle为选填项

</script>

</body>

</html>


js代码




function tabPanel(param){

 var defaultIndex=param["default"]||,//设置显示的页面

 panelobj=param["panel"],//设置tab容器

 defalutClass=param["defalutStyle"]||"",//设置tab菜单项的普通样式

 hoverClass=param["hoverStyle"]||"hover",//设置鼠标移到tab菜单项的样式

 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],"");

 //便利函数

 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}




有用  |  无用

猜你喜欢

您可能感兴趣的文章: