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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
Javascript数组及类数组相关原理详解
Oct 29 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 多进程 解决难题
2009/06/22 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
JS中的三个循环小结
2017/06/20 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
node通过express搭建自己的服务器
2017/09/30 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
js实现全选和全不选
2020/07/28 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
Python中IPYTHON入门实例
2015/05/11 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
Python join()函数原理及使用方法
2020/11/14 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
大学生标准推荐信范文
2013/11/25 职场文书
高级方案规划工程师岗位职责
2013/11/29 职场文书
大一期末自我鉴定
2013/12/13 职场文书
农民致富事迹材料
2014/01/23 职场文书
高中校园广播稿
2014/10/21 职场文书
老公保证书
2015/01/17 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
农业项目合作意向书
2015/05/08 职场文书
决心书格式及范文
2019/06/24 职场文书