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

前端技术 2023/09/09 JavaScript

效果图如下：

查看演示  源码下载

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}

本文地址：https://www.stayed.cn/item/25603

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案