js实现tab切换效果


Posted in Javascript onFebruary 16, 2017

效果如下:

js实现tab切换效果

代码如下:

<!DOCTYPE html > 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>js封装一个tab效果</title> 
<style type="text/css"> 
*{margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
.wrapper { width:500px; border:1px solid #e6e6e6; margin:0 auto; padding:50px;}
/*--=tabPanel--*/
#tab{border:1px solid #ccc;}
#tab .tab-bd{border-top:none;margin:0 auto;padding:10px;text-align:left;height:120px;position:relative}
.tab-nav{margin:0 auto;padding:0;background:#eee;height:26px;}
.tab-nav li{display:inline;list-style:none outside none;width:90px;height:26px;float:left;line-height:26px;text-align:center;}
.tab-nav li a{color:#555;display:inline-block}
.tab-nav li a:hover,.tab-nav li.hover a{text-decoration:none;background:#fff;color:#000;display:block; }
.hidden{display:none}
</style> 
<script type="text/javascript">
function tabPanel(param){
 var defaultIndex=param["default"]||0,//设置显示的页面
 panelobj=param["panel"],//设置tab容器
 defalutClass=param["defalutStyle"]||"",//设置tab菜单项的普通样式
 hoverClass=param["hoverStyle"]||"hover",//设置鼠标移到tab菜单项的样式
 currentIndex=defaultIndex,
 menus=_$(panelobj).getElementsByTagName("ul")[0].getElementsByTagName("li"),
 contents=_$(panelobj).getElementsByTagName("ul")[1].getElementsByTagName("li"),
 menuNumber=menus.length,
 hidden="hidden";
 for(var i=0;i<menuNumber;i++){
 _setClass(contents[0],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}
}
</script>
<body> 
<div class="wrapper">
<div id="tab">
 <!-- tabHead -->
 <ul class="tab-nav">
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >交易安全</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >淘宝大学</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >爱心</a></li>
 </ul>
 <!-- tabPanel-->
 <ul class="tab-bd">
 <li>
  1111
 </li>
 <li>
  222
 </li>
 <li>
  333
 </li>
 </ul>
</div>
<script type="text/javascript">
tabPanel({"panel":"tab"});//panel为必填项,default、defalutStyle、hoverStyle为选填项
</script>
</div>
</body> 
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
jquery实现自适应banner焦点图
Feb 16 #Javascript
js 作用域和变量详解
Feb 16 #Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 #Javascript
js面向对象编程总结
Feb 16 #Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 #Javascript
JS实现DIV高度自适应窗口示例
Feb 16 #Javascript
Js apply方法详解
Feb 16 #Javascript
You might like
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
js实现点赞效果
2020/03/16 Javascript
python各种语言间时间的转化实现代码
2016/03/23 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
一套.net面试题及答案
2016/11/02 面试题
什么是抽象
2015/12/13 面试题
大学校园餐饮创业计划书
2019/08/07 职场文书