繁体中文
设为首页
加入收藏
首页
网页制作
脚本专栏
网络编程
数据库
源码下载
软件下载
脚本下载
平面设计
媒体动画
网站技巧
实用技巧
免费资源
主机租用
域名查询
典型特效
按钮特效
页面背景
鼠标特效
时间日期
状态特效
图象特效
cookie
下拉菜单
链接特效
导航菜单
页面导航：
首页
→
网络编程
→
JavaScript
→
网页特效
→
导航菜单
→ 正文内容 TAB切换
javascript仿126邮箱TAB切换效果
发布：dxy 字体：[
增加
减小
] 类型：转载
仿126中的绿色tab切换效果，比较漂亮
点击运行可以看到效果:
<!-- 引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程 Editor:weasle Email:weasle@163.com QQ:112011531 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>简洁Tab</title> <style type="text/css"> <!-- body,div,ul,li{ padding:0; text-align:center; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited { color: #00F; text-decoration:none; } a:hover { color: #c00; text-decoration:underline; } ul{ list-style:none;} /*选项卡1*/ #Tab1{ width:460px; margin:0px; padding:0px; margin:0 auto;} /*选项卡2*/ #Tab2{ width:576px; margin:0px; padding:0px; margin:0 auto;} /*菜单class*/ .Menubox { width:100%; background:url(http://www.jb51.net/upload/small/20079299441652.gif); height:28px; line-height:28px; } .Menubox ul{ margin:0px; padding:0px; } .Menubox li{ float:left; display:block; cursor:pointer; width:114px; text-align:center; color:#949694; font-weight:bold; } .Menubox li.hover{ padding:0px; background:#fff; width:116px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F; background:url(http://www.jb51.net/upload/small/200792994426548.gif); color:#739242; font-weight:bold; height:27px; line-height:27px; } .Contentbox{ clear:both; margin-top:0px; border:1px solid #A8C29F; border-top:none; height:181px; text-align:center; padding-top:8px; } --> </style> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> </head> <body> <div id="Tab1"> <div class="Menubox"> <ul> <li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li> <li id="one2" onclick="setTab('one',2,4)" >新闻2</li> <li id="one3" onclick="setTab('one',3,4)">新闻3</li> <li id="one4" onclick="setTab('one',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_one_1" class="hover">新闻列表1</div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> </div> </div> <div id="Tab2"> <div class="Menubox"> <ul> <li id="two1" onclick="setTab('two',1,4)" class="hover">新闻1</li> <li id="two2" onclick="setTab('two',2,4)" >新闻2</li> <li id="two3" onclick="setTab('two',3,4)">新闻3</li> <li id="two4" onclick="setTab('two',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_two_1" >新闻列表1</div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div> </div> </body>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
javascript
tab
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
js仿淘宝的拼音检索特效代码
下一篇文章：
JavaScript CSS创建右击菜单效果代码
·在百度中搜索关于“
javascript仿126邮箱TAB切换效果
相关内容
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
javascript实现表现、结构、行为分离的选
几个不错的自动收缩菜单导航效果
用javascript实现的不错的一款网页选项卡
超个性的导航效果
javascript实现的树型下拉框改进版
javascript 代码简单的管理菜单
无限级别的菜单（侧拉菜单）
搜集了几个不错的下拉菜单效果
一个不错的渐显菜单
yahoo首页伸缩效果代码
最 近 更 新
JavaScript CSS创建右击菜单效果代码
javascript实现操作cookie实现的可记忆菜
js iframe网站后台左右收缩型页面脚本
发一个比较漂亮的选项卡动态增删的效果
一段非常好的滑动门[可感应触发或点击触发
超个性的导航效果
js仿土豆视频滚动菜单
Js+DVML很酷漂亮实用的右键弹出菜单
带缓冲的 收缩与展开内容效果
javascript实现的树型下拉框改进版
热 点 排 行
可以媲美Flash的JS导航菜单
用js实现的比较经典实用的触发型
又一个漂亮的导航栏的下拉菜单
js实现的非常棒的绿色下拉透明菜
腾讯QQ网页在线客服，随网页滚动
搜集了几个不错的下拉菜单效果
几个不错的自动收缩菜单导航效果
javascript渐变显示的雅虎中国选
用javascript实现的不错的一款网
发一个比较漂亮的选项卡动态增删
文章评论
共有 位脚本之家网友发表了评论我来说两句