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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
DIV菜单层实现代码
Nov 19 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
深入理解vue路由的使用
Mar 24 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
vue实现鼠标经过动画
Oct 16 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实现支持中文的文件下载功能示例
2017/08/30 PHP
js setTimeout opener的用法示例详解
2013/10/23 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
js实现简易计算器功能
2019/10/18 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
python制作填词游戏步骤详解
2019/05/05 Python
python代码编写计算器小程序
2020/03/30 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
解决python运行启动报错问题
2020/06/01 Python
用python对excel查重
2020/12/07 Python
python中的unittest框架实例详解
2021/02/05 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
C语言面试题
2013/05/19 面试题
Java语言程序设计测试题判断题部分
2013/01/06 面试题
门卫工作岗位职责
2013/12/17 职场文书
给女儿的表扬信
2014/01/18 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS