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获取注册信息并提示实现代码
Apr 21 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
svg动画之动态描边效果
Feb 22 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 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个人网站架设连环讲(三)
2006/10/09 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Python如何实现转换URL详解
2019/07/02 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
个性婚礼策划方案
2014/05/17 职场文书
2014年度考核工作总结
2014/12/24 职场文书
家长会欢迎词
2015/01/23 职场文书
玄武湖导游词
2015/02/05 职场文书
成事在人观后感
2015/06/16 职场文书
暂住证明怎么写
2015/06/19 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python
ipad隐藏软件app图标方法
2022/04/19 数码科技