更多导航首页资讯中心软件下载单机游戏手机应用源码下载驱动下载

资讯教程业界新闻 互联网 硬件数码 安全资讯 游戏资讯 游戏攻略 手机相关 软件报道

软件下载网络软件 系统工具 应用软件 联络聊天 图形图像 多媒体类 手机软件 游戏娱乐

单机游戏动作射击 策略战略 角色扮演 体育竞技 冒险解密 模拟养成 棋牌益智 其它游戏

手机应用iPhoneSymbianWP7PPCJAVA

源码下载ASP源码 PHP源码 CGI源码 JSP源码 .Net源码 VC/C++ VB源码 C#源码

硬件驱动驱动下载硬件工具

您的位置:首页新闻编程开发网页制作Javascript

JS自定义选项卡函数和用法详解

来源:本站整理作者:佚名时间:2015-9-2 12:01:05我要评论(0)

JS自定义选项卡函数和用法详解,本文讲述了JS自定义选项卡函数及用法。

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

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

运行效果截图如下:

具体代码如下:

<!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 : kingark@163.com
*/
(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>
[访问统计:]
上一篇:C语言pause()函数、alarm()函数及sleep()函数使用详解
下一篇:C语言中初始、增加及删除进程信号操作实例

相关推荐

  • 该分类还没有添加任何内容!

相关软件

文章评论
发表评论