脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js封装一个tab

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

 更新时间：2015年09月15日 12:12:21   投稿：mrr  
本文给大家分享javascript封装一个tab效果源码分享，感兴趣的朋友一起来看看吧

效果图如下：

查看演示  源码下载

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}
您可能感兴趣的文章:

相关文章

  • js简单实现网页换肤功能

    js简单实现网页换肤功能

    这篇文章主要为大家详细介绍了js简单实现网页换肤功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 前端实现监控SDK的实战指南

    前端实现监控SDK的实战指南

    本文讨论了前端监控和数据统计的设计思路,包括错误监控、用户行为日志、PV/UV统计等方面,介绍了数据采集、日志上报、日志查询的流程,以及监控错误的类型和用户埋点统计的手段,同时提到了PV和UV的统计方法,需要的朋友可以参考下
    2024-10-10
  • 原生JS封装vue Tab切换效果

    原生JS封装vue Tab切换效果

    这篇文章主要为大家详细介绍了原生JS封装vue Tab切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript学习笔记之惰性函数示例详解

    JavaScript学习笔记之惰性函数示例详解

    函数是js世界的一等公民，js的动态性、易变性在函数的应用上，体现的淋漓尽致。下面这篇文章主要给大家介绍了关于JavaScript学习笔记之惰性函数的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
    2017-08-08
  • javascript+html5+css3自定义提示窗口

    javascript+html5+css3自定义提示窗口

    这篇文章主要为大家详细介绍了javascript+html5+css3自定义提示窗口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JavaScript使用SpreadJS创建Excel查看器

    JavaScript使用SpreadJS创建Excel查看器

    在现代的Web应用开发中,Excel文件的处理和展示是一项常见的需求,小编今天将为大家展示如何借助SpreadJS来创建一个Excel查看器,感兴趣的小伙伴可以了解下
    2023-12-12
  • Iview DatePicker 限制选择当前月份及以后的月份

    Iview DatePicker 限制选择当前月份及以后的月份

    文章介绍了如何使用iviewDatePicker组件限制用户只能选择当前月份及以后的月份,并提供了相关的html代码和js代码示例,感兴趣的朋友跟随小编一起看看吧
    2024-11-11
  • JAVASCRIPT模式窗口中下载文件无法接收iframe的流

    JAVASCRIPT模式窗口中下载文件无法接收iframe的流

    模式窗口中下载文件，有时在下载时发现服务器无法接收iframe的流，因为在模式窗口中没有触发iframe的src重新定向事件
    2013-10-10
  • js代码实现无缝滚动(文字和图片)

    js代码实现无缝滚动(文字和图片)

    js无缝滚动，图片无缝滚动，文字无缝滚动，基于js代码如何实现，本篇文章给大家详解js代码实现无缝滚动(文字和图片)，需要的朋友可以参考下
    2015-08-08
  • input链接页面、打开新网页等等的具体实现

    input链接页面、打开新网页等等的具体实现

    input可以链接到某页、返回、打开新网页、打开无边框的新窗口等等，本文整理了一些，感兴趣的朋友可以参考下
    2013-12-12

最新评论