模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
又一淘宝网的TAB选项卡,很圆滑_菜单导航特效
查看演示效果
特效Tag:
选项卡
Tab
添加
又一个淘宝网的TAB选项卡,很圆滑,经典之作,用到四张背景图片,请依次下载。
<html> <head> <title>淘宝网的TAB选项卡</title> <style> body {font-size:12px;} ul.TabBarLevel1{ list-style:none; margin:0; padding:0; height:29px; background-image:url(http://p1.mb5u.com/texiao/tabbar_level1_bk.gif); } ul.TabBarLevel1 li{ float:left; padding:0; height:29px; margin-right:1px; background:url(http://p1.mb5u.com/texiao/tabbar_level1_slice_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li a{ display:block; line-height:29px; padding:0 20px; color:#333; background:url(http://p1.mb5u.com/texiao/tabbar_level1_slice_right_bk.gif) right top no-repeat; white-space: nowrap; } ul.TabBarLevel1 li.Selected{ background:url(http://p1.mb5u.com/texiao/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li.Selected a{ background:url(http://p1.mb5u.com/texiao/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat; } ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{ color:#333; } ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{ color:#F30; text-decoration:none; } ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{ color:#000; } ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{ color:#F30; text-decoration:none; } div.HackBox { padding : 2px 2px ; border-left: 2px solid #6697CD; border-right: 2px solid #6697CD; border-bottom: 2px solid #6697CD; } </style> </head> <body> <div id="Whatever"> <ul class="TabBarLevel1" id="TabPage1"> <li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">宝贝详情</a></li> <li id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">其他信息</a></li> <li id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');">出价记录</a></li> <li id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">留言簿</a></li> </ul> </div> <script language="JavaScript"> function switchTab(tabpage,tabid){ var oItem = document.getElementById(tabpage); for(var i=0;i<oItem.children.length;i++){ var x = oItem.children(i); x.className = ""; var y = x.getElementsByTagName('a'); y[0].style.color="#333333"; } document.getElementById(tabid).className = "Selected"; } </script> </body> </html>
所属频道:
菜单导航特效
/
更新时间:2011-02-24
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
CSS选项卡、滑动门代码
CSS经典Tab滑动门菜单
一个选项卡Tab的雏形
JS版下拉菜单生成器
CSS导航菜单
CSS 滑动门,自己写的,没有图片
CSS黑白变成彩色图片的块状导航
UL、LI 无序列表实现纯CSS网站导航菜单
Windows 风格选项卡标签
左侧竖向选项卡TAB
猜你也喜欢看这些
图象滚动公告版
Marquee 图片滚动特效
CSS强制按比例缩小图片
腾讯JS商品滚动效果
Js+Css图片切换,带缩略图响应鼠标滑过
jQuery制作的产品展示效果
Js拖动特效,一串水晶球
一组图片向上滚屏特效
JS+CSS滤镜实现多种图片效果
JS+CSS漂亮相册效果
相关链接:
复制本页链接
|
搜索又一淘宝网的TAB选项卡,很圆滑
特效说明:
菜单导航模板
-
又一淘宝网的TAB选项卡,很圆滑
。