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 相关文章推荐
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 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独立Session数据库存储操作类分享
2014/06/11 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
Python有序字典简单实现方法示例
2017/09/28 Python
python实现感知器
2017/12/19 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
python查看模块,对象的函数方法
2018/10/16 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python实现Linux监控的方法
2019/05/16 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
毕业自我评价
2014/02/05 职场文书
项目负责人任命书
2014/06/04 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis