脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS自定义选项卡函数及用法

JS自定义选项卡函数及用法实例分析

 更新时间：2015年09月02日 11:39:33   作者：企鹅  
这篇文章主要介绍了JS自定义选项卡函数及用法,以实例形式较为详细的分析了javascript自定义tab切换函数及使用方法,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS自定义选项卡函数及用法。分享给大家供大家参考。具体如下：

这里分享一个JS选项卡函数附带演示效果，选项卡函数参数调用说明：

cmd：点击元素集合
con：显示容器集合
evt：触发事件
css：为当前点击元素的样式名称
index：为默认显示第几项的索引值
目前选项卡的样式还比较简洁和粗糙，想用的自己动动手美化一下。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-zdy-tab-cha-fun-style-codes/

具体代码如下：

<!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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Js实现粘贴上传图片的原理及示例

    Js实现粘贴上传图片的原理及示例

    这篇文章主要介绍了Js实现粘贴上传图片的原理及示例，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2020-12-12
  • JS实用的带停顿的逐行文本循环滚动效果实例

    JS实用的带停顿的逐行文本循环滚动效果实例

    下面小编就为大家带来一篇JS实用的带停顿的逐行文本循环滚动效果实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 微信头像地址失效踩坑记附带解决方案

    微信头像地址失效踩坑记附带解决方案

    这篇文章主要介绍了微信头像地址失效踩坑记附带解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • JS常用正则表达式总结【经典】

    JS常用正则表达式总结【经典】

    这篇文章主要介绍了JS常用正则表达式,总结分析了常见的数字、字符、邮箱、身份证、电话等的正则验证技巧,需要的朋友可以参考下
    2017-05-05
  • js实现菜单跳转效果

    js实现菜单跳转效果

    这篇文章主要为大家详细介绍了js实现菜单跳转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 微信小程序连续签到7天积分获得功能的示例代码

    微信小程序连续签到7天积分获得功能的示例代码

    今天通过一个案例给大家分享微信小程序连续签到7天积分获得功能，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值，感兴趣的朋友一起学习吧
    2020-08-08
  • JavaScript声明变量的这四兄弟(var、let、function、const)

    JavaScript声明变量的这四兄弟(var、let、function、const)

    这篇文章主要介绍了JavaScript声明变量的这四兄弟，主要就是介绍var、let、function、const区别,需要的朋友可以参考下
    2023-02-02
  • Javascript日期时间函数的使用方法举例

    Javascript日期时间函数的使用方法举例

    在JavaScript中日期时间函数是一组用于操作和处理日期和时间的函数,这些函数可以用于获取当前日期和时间、格式化日期和时间、计算日期和时间的差异、转换日期和时间的格式等,这篇文章主要给大家介绍了关于Javascript日期时间函数的使用方法,需要的朋友可以参考下
    2024-02-02
  • javascript查找字符串中出现最多的字符和次数的小例子

    javascript查找字符串中出现最多的字符和次数的小例子

    这篇文章介绍了javascript查找字符串中出现最多的字符和次数的小例子，有需要的朋友可以参考一下
    2013-10-10
  • 简单使用webpack打包文件的实现

    简单使用webpack打包文件的实现

    这篇文章主要介绍了简单使用webpack打包文件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论