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 相关文章推荐
JSONObject使用方法详解
Dec 17 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
js仿360开机效果
Dec 26 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
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中的CMS的涵义
2007/03/11 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
农历与西历对照
2006/09/06 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
python+flask实现API的方法
2018/11/21 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
自荐信要包含哪些内容
2013/11/06 职场文书
总经理岗位职责范本
2014/02/02 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
python中redis包操作数据库的教程
2022/04/19 Python