教程集 > 脚本编程 > javascript > 正文简单滑动菜单代码

简单滑动菜单代码

发布时间：2016-11-26 编辑：jiaochengji.com

教程集为您提供简单滑动菜单代码等资源，欢迎您收藏本站，我们将为您提供最新的简单滑动菜单代码资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" ><style type="text/css" media="screen"> .td1{ background: #ccc; } .td2{ background: #FFF; } td{ cursor: pointer; text-align: center; } #test_2, #test_3, #test_4{ display: none; } </style> <table width="400"> <tr id="test_td_td1_td2"> <td class="td1">标签１</td> <td>标签２</td> <td>标签３</td> <td>标签４</td> </tr> <tr> <td colspan="4">

11111111111

22222222222

3333333333333333333333333

4444444444444444444444444444444444444

</td> </tr> </table> <script type="text/javascript"> function tab(o){ var $ = function(o){return document.getElementById(o)}; var css = o.split('_'); if(css.length!=4)return; o = $(o); o.id = css[0]; if(o){ var item = o.getElementsByTagName(css[1]); o['cur'] = item[0]; for(var i=0;i<item.length;i ){ item[i]['css'] = css; item[i]['link'] = o; item[i]['Index'] = i 1; item[i].onclick = function(){ this['link']['cur'].className = this['css'][3]; this.className = this['css'][2]; $(this['link']['id'] '_' this['link']['cur']['Index']).style.display = 'none'; $(this['link']['id'] '_' this['Index']).style.display = 'block'; this['link']['cur'] = this; } } } } window.onload = function(){ new tab('test_td_td1_td2'); }

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
js向滑动导航菜单源码
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
 jQuery菜单插件 Smooth Navigational Menu
滑动菜单
 jQuery水平下拉菜单 jMenu
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
 仿新浪切换滑门菜单js代码
 jquery弹性滑动导航菜单
 利用JQuery动画制作滑动菜单项效果实现步骤及代码
 jQuery 打造动态下滑菜单实现说明

上一篇：js 多个选项卡效果代码下一篇：新浪,163滑动导航菜单代码

[关闭]

简单滑动菜单代码

最近更新

浏览排行