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 相关文章推荐
js类 from qq
Nov 13 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
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 adodb操作mysql数据库
2009/03/19 PHP
sae使用smarty模板的方法
2013/12/17 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
javascript事件模型代码
2007/07/01 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Python3 修改默认环境的方法
2019/02/16 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
幼儿园园长自我鉴定
2013/10/22 职场文书
静心口服夜广告词
2014/03/20 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
爱护公物演讲稿
2014/09/09 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
关于感谢信的范文
2015/01/23 职场文书
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
MySQL详细讲解变量variables的用法
2022/06/21 MySQL
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL