Jquery中文网 www.jquerycn.cn
jQuery 教程 | jQuery ui教程 |
Jquery中文网 >  脚本编程  >  javascript  >  正文 原生javascript选项卡菜单代码

原生javascript选项卡菜单代码

发布时间：2016-12-13   编辑：www.jquerycn.cn
jquery中文网为您提供原生javascript选项卡菜单代码等资源，欢迎您收藏本站，我们将为您提供最新的原生javascript选项卡菜单代码资源
一个原生的javascript代码写的选项卡菜单,有需要的朋友可以参考一下。
提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>简洁实用的原生javascript选项卡菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <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>
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
<ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul>
<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></textarea>
提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
原生javascript选项卡菜单代码
斗鱼tv很卡怎么办 斗鱼tv解决很卡方法
jquery统计子菜单条数的实现代码
创建ASP.NET数据存储层(7)
js Tab选项卡特效代码
ASP.NET控件利用Control.ContextMenu加入快捷菜单
导航菜单仿sina,163淡蓝色选项卡菜单
php与js制作的无限级可伸缩菜单
原生javascript延时导航菜单条效果
JavaScript＋PHP应用一：网页

上一篇：javascript简单实用的选项卡实例代码 下一篇：javascript中相互横向切换展示的窗口效果
[关闭]
最近更新
浏览排行

关于本站 | 网站地图 | 联系我们 | 免责声明 | 友情链接
黔ICP备2021004999号-1 广告合作邮箱:zhongwenwanghezuo@gmail.com
CopyRight © 2010-2014 jQeury中文网 jquerycn.cn , All Rights Reserved.