Jquery中文网 > 脚本编程 > javascript > 正文 javascript 选项卡实现代码

javascript 选项卡实现代码

发布时间：2017-01-04 编辑：www.jquerycn.cn

jquery中文网为您提供javascript 选项卡实现代码等资源，欢迎您收藏本站，我们将为您提供最新的javascript 选项卡实现代码资源

文章以最简单的办法实现了javascript 选项卡效果，有需要的同学可以美化一下就可以使用了哦。

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

<textarea name="runcool" rows="28" cols="75" ><style> body { font-family: Arial,"宋体"; font-size:9pt; } td { font-size:12px;; } .mousehand{ cursor:hand; } .titletable{ padding-left:5px; background-color:#E9E9E9; } table.TabBarLevel1{ } table.TabBarLevel1 td{ border:1px solid #CCCCCC; height:20px; background-color:#E1E1E1; } table.TabBarLevel1 td.Selected{ border-bottom-width:0px; background-color:#ffffff; } table.TabBarLevel1 td.Black{ border-left-width:0px; border-top-width:0px; border-right-width:0px; background-color:#FFFFFF; } table.Content{ border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; } </style> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="TabBarLevel1" id="TabPage1"> <tr align="center"> <td width="130" id="imageTab1" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab1','心开风神','image');">热门图片</td> <td width="7" class="Black"> </td> <td width="80" id="imageTab2" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab2','子虚乌有','image');">波希米亚</td> <td width="7" class="Black"> </td> <td width="80" id="imageTab3" valign="middle" class="Selected mousehand" onclick="javascript:switchTab('TabPage1','imageTab3','孤零飘客','image');">红色黑客</td> <td width="7" class="Black"> </td> <td width="" align="right" class="Black">www.jquerycn.cn </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Content"> <tr> <td height="110">

正在加载...

</td> </tr> </table></td> </tr> </table> <script language="javascript"> function switchTab(tabpage,tabid,action,type){ var oItem = document.getElementById(tabpage); for(var i=1;i< 4;i ){ var x = document.getElementById(type 'Tab' i); //alert(x); x.className = "mousehand"; //var y = x.getElementsByTagName('a'); //y[0].style.color="#333333"; } document.getElementById(tabid).className = "Selected"; //gethotimagelist(type '_' action); divimagelist_all.innerHTML = type '_' action; } </script></textarea>

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

您可能感兴趣的文章：
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
 jquery自动切换tabs选项卡的实现代码
 jquery网页选项卡应用代码
 JQuery Tab选项卡效果代码改进版
 jquery自动切换tabs选项卡的具体实现
 纯 CSS 选项卡的实现例子
 jQuery选项卡 KandyTabs
Jquery tab选项卡的实现代码
 Jquery 经典选项卡的实现代码一例
 基于jquery的修改当前TAB显示标题的代码

上一篇：Javascript 链接(URL)解析类下一篇：超简单javascript实现的选项卡菜单效果

[关闭]

javascript 选项卡实现代码

最近更新

浏览排行