教程集 > 脚本编程 > javascript > 正文 tab选项卡js效果代码

tab选项卡js效果代码

发布时间：2016-10-18 编辑：jiaochengji.com

教程集为您提供tab选项卡js效果代码等资源，欢迎您收藏本站，我们将为您提供最新的tab选项卡js效果代码资源

文章为你提供一款tab选项卡js效果代码，是利用了js div实例的tab选项卡切换代码。

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

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>选项卡菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body,table,td,th,input,textarea,button,select{ font:13px Verdana; } body{ margin-top:10px; margin-right:auto; margin-bottom:10px; margin-left:auto; text-align:center; height:auto; width:auto; font-size:12px; color:#000000; background-color:#eef; } div#tab{ text-align:left; width:760px; height:400px; background-color:#FFFFFF; padding:20px; } ul.tabU{ height:10px; } ul.tabU li{ float:left; list-style-type:none; height:28px; line-height:28px; text-align:center; margin-right:1px; } ul.tabU li a{ text-decoration:none; color:#000000; display:block; width:auto; background:url(/201009021100/tab_selected_left_bk.gif) no-repeat left -29px; } ul.tabU li a span{ display:block; background:url(/201009021100/tab_selected_right_bk.gif) no-repeat right -29px; padding:0 15px 0 15px; } div.tabC{ display:none; border:1px solid; padding:6px; height:300px; border-top:5px; } div.tabD1 a.tabB1,a.tabB1:hover{ text-decoration:none; color:#ffffff; width:auto; background:url(/201009021100/tab_selected_left_bk.gif) no-repeat left -87px; } div.tabD1 a.tabB1.span,a.tabB1:hover span{ display:block; background:url(/201009021100/tab_selected_right_bk.gif) no-repeat right -87px; padding:0 15px 0 15px; } div.tabD1 .tabR1{ display:block; background:url(/201009021100/tab_selected_right_bk.gif) no-repeat right -87px; padding:0 15px 0 15px; } div.tabD1 div.tabC1{ border-color:#EAAD6B;display:block;background-color:#FDEDD8; } div.tabD2 a.tabB2,a.tabB2:hover{ text-decoration:none; color:#ffffff; width:auto; background:url(/201009021100/tab_selected_left_bk.gif) no-repeat left -0px; } div.tabD2 a.tabB2.span,a.tabB2:hover span{ display:block; background:url(/201009021100/tab_selected_right_bk.gif) no-repeat right -0px; padding:0 15px 0 15px; } div.tabD2 .tabR2{ display:block; background:url(/201009021100/tab_selected_right_bk.gif) no-repeat right -0px; padding:0 15px 0 15px; } div.tabD2 div.tabC2{ border-color:#6ECEF3;display:block;background-color:#E6F6FD; } div.tabD3 a.tabB3,a.tabB3:hover{ text-decoration:none; color:#ffffff; width:auto; background:url(/201009021100/tab_selected_left_bk.gif) no-repeat left -58px; } div.tabD3 a.tabB3.span,a.tabB3:hover span{ display:block; background:url(/201009021100/tab_selected_right_bk.gif) no-repeat right -58px; padding:0 15px 0 15px; } div.tabD3 .tabR3{ display:block; background:url(/201009021100/tab_selected_right_bk.gif) no-repeat right -58px; padding:0 15px 0 15px; } div.tabD3 div.tabC3{ border-color:#84AC44; display:block; background-color:#F1F6E7; } div.tabD4 a.tabB4,a.tabB4:hover{ text-decoration:none; color:#ffffff; width:auto; background:url(/201009021100/tab_selected_left_bk.gif) no-repeat left -116px; } div.tabD4 a.tabB4.span,a.tabB4:hover span{ display:block; background:url(/201009021100/tab_selected_right_bk.gif) no-repeat right -116px; padding:0 15px 0 15px; } div.tabD4 .tabR4{ display:block; background:url(/201009021100/tab_selected_right_bk.gif) no-repeat right -116px; padding:0 15px 0 15px; } div.tabD4 div.tabC4{ border-color:#F37CA3; display:block; background-color:#FFEEF4; } div.tabD1 a.tabB1,div.tabD2 a.tabB2,div.tabD3 a.tabB3,div.tabD4 a.tabB4{ padding:0; } </style> <script type="text/javascript">

网站首页

图片素材

网页特效

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

您可能感兴趣的文章：
js Tab选项卡特效代码
 Javascript中常用选项卡3种写法
 纯 CSS 选项卡的实现例子
 jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
 js自适应滑动门代码
 经典的jquery Tab 选项卡通用效果代码
 用jQuery打造TabPanel效果代码
 Jquery 经典选项卡的实现代码一例
 纯CSS实现Tab页切换效果
 Jquery tab选项卡的实现代码

上一篇：多种流行样式的选项卡菜单js代码下一篇：兼容主流浏览器，纯CSS下拉菜单

[关闭]

tab选项卡js效果代码

最近更新

浏览排行