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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
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安全上传图片的方法
2015/03/21 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
ionic 自定义弹框效果
2017/06/27 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
大学本科毕业生的自我鉴定
2013/11/26 职场文书
汉语言文学职业规划
2014/02/14 职场文书
机关作风建设心得体会
2014/10/22 职场文书
企业介绍信范文
2015/01/30 职场文书
英文邀请函
2015/02/02 职场文书
2014年个人年终总结
2015/03/09 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
Python基本数据类型之字符串str
2021/07/21 Python