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 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
Javascript 继承实现例子
Aug 12 Javascript
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
js数组操作学习总结
Nov 04 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
10分钟学会js处理json的常用方法
Dec 06 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 in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP实现简易图形计算器
2020/08/28 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python制作最美应用的爬虫
2015/10/28 Python
python多进程控制学习小结
2018/10/31 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
生日邀请函范文
2014/01/13 职场文书
竞聘自述材料
2014/08/25 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
python绘制箱型图
2021/04/27 Python
Nginx配置https的实现
2021/11/27 Servers
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle