JS自定义选项卡函数及用法实例分析


Posted in Javascript onSeptember 02, 2015

本文实例讲述了JS自定义选项卡函数及用法。分享给大家供大家参考。具体如下:

这里分享一个JS选项卡函数附带演示效果,选项卡函数参数调用说明:

cmd:点击元素集合
con:显示容器集合
evt:触发事件
css:为当前点击元素的样式名称
index:为默认显示第几项的索引值
目前选项卡的样式还比较简洁和粗糙,想用的自己动动手美化一下。

运行效果截图如下:

JS自定义选项卡函数及用法实例分析

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js选项卡</title>
<style type="text/css">
ul,li{ margin:0; padding:0; overflow:hidden; list-style:none; font-family:"Lucida Console", Monaco, monospace}
#tab{ width:300px; height:25px; border:1px solid #ddd}
#tab li{ width:75px; height:25px; line-height:26px; text-align:center; float:left; cursor:pointer}
#tab li.curr{ background:#eee}
#con{ width:300px; border:1px solid #ddd; margin-top:-1px;}
#con li{ display:none; width:280px; height:100px; padding:10px;}
</style>
</head>
<body>
<div id="tab">
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
 </ul>
</div>
<div id="con">
 <ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
 </ul>
</div>
<script type="text/javascript">
/*
 选项卡函数:
 cmd:点击元素集合
 con:显示容器集合
 evt:触发事件
 css:为当前点击元素的样式名称
 index:为默认显示第几项的索引值
 email : [email]kingark@163.com[/email]
*/
(function(t){
 window[t] = function(cmd, con, evt, css, index){
   //默认触发事件
  var evt = evt || 'mouseover',
   //默认样式名
   css = css || 'curr',
   index = index || 0;
  //初始化显示项
  show(index);
  //为点击元素绑定事件
  for(var i = 0, l = cmd.length; i < l; i ++){
   //为准确获得i的值用闭包传值
   (function(n){
    cmd[n]['on'+ evt] = function(){
     //切换到索引为i的选项
     show(n);
    }
   })(i);
  };
  //切换显示
  function show(i){
   cmd[index].className = cmd[index].className.replace(css, '');
   con[index].style.display = 'none';
   index = i;
   cmd[index].className += css;
   con[index].style.display = 'block';
  }
 }
//指定选项卡函数的名称
})('Tab');
function tag(i, t){
 return document.getElementById(i).getElementsByTagName(t);
};
//调用选项卡函数
Tab(tag('tab','li'), tag('con','li'), 'click', '', 1);
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
繁简字转换功能
Jul 19 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 Javascript
JavaScript实现简单计时器
Jun 22 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 #Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 #Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 #Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 #Javascript
JavaScript对象学习小结
Sep 02 #Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 #Javascript
jquery实现华丽的可折角广告代码
Sep 02 #Javascript
You might like
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
JS高级运动实例分析
2016/12/20 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
JS中的BOM应用
2018/02/02 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
Python类的动态绑定实现原理
2020/03/21 Python
Python爬取网页信息的示例
2020/09/24 Python
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
2014年妇女工作总结
2014/12/06 职场文书
百年孤独读书笔记
2015/06/29 职场文书
公司酒会致辞
2015/07/30 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技