＞
设为首页
＞
收藏本站
＞
最新电影
首页
运营资讯
今日英语
图形图像
计算机技术
Asp编程
网站结构化
资源共享
休闲娱乐
访问新站
您现在的位置：
首页
=>
后台技术
=>
脚本特效
=>
菜单导航
订阅本栏目
同一个页面可以多次使用的选项卡
时间： 2008-07-10 23:43:10 阅读次数：3264
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <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(/imagesjs/126mail2_080502093624.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(/imagesjs/126mail3_080502093744.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> <br>如果效果显示有错，请将代码另存为HTML页面再运行！<br> <div id="Tab1"> <div class="Menubox"> <ul> <li id="one1" onclick="setTab('one',1,4)" class="hover">飞飞Asp技术乐园</li> <li id="one2" onclick="setTab('one',2,4)" >飞腾创意论坛</li> <li id="one3" onclick="setTab('one',3,4)">FeitecCMS Pro</li> <li id="one4" onclick="setTab('one',4,4)">FeitecCMS Free</li> </ul> </div> <div class="Contentbox"> <div id="con_one_1" class="hover">飞飞Asp技术乐园www.ffasp.com：创意无限，真诚永远！</div> <div id="con_one_2" style="display:none">bbs.ffasp.com</div> <div id="con_one_3" style="display:none">ProInfo.asp</div> <div id="con_one_4" style="display:none">http://demo.ffasp.com</div> </div> </div> <br> <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> </html>
提示：您可以先修改部分代码再运行
飞飞~Asp技术乐园
站内搜索
：
标题
内容
下一篇
div+css能在ie7/ie7/Firefox下运行的菜单导航条
上一篇
可以拖动的菜单
本栏目最新
栏目最新列表
使用jquery实现的简单下拉菜单（下拉框）效
简单的下拉菜单效果
div+css能在ie7/ie7/Firefox下运行的菜单导
同一个页面可以多次使用的选项卡
非常酷的菜单管理效果
网站优化策划
栏目最新列表
增加网站外链的快速方法
网站上线前必做的30个检查
新的友情链接参考标准（没有google的PR情况
优化Google的AdSense广告的五个工具
王通讲SEO八大基础
站点最新
站点最新列表
微博推广的一些技巧
xhEditor v1.1.7 发布，
收集的一些轻量级非常实
50个新鲜兼容最新版本的
javascript中cookie的设
Excel中出现#VALUE!、#D
jquery插件:飞飞表情插件
十个使用HTML5开发的精彩
支持HTML5的浏览器有哪些
飞妮莫属:漫画：如何写出
历史最热10条信息
MIME介绍 及
[
1
] [
2
] [
3
]
巧用Google和迅雷来下载
Transact SQL 常
[
1
] [
2
]
VIA Rhine II Fast Ethe
电脑常用端
[
1
] [
2
] [
3
]
Do you get a kick out
十道羊皮卷 欣赏+mp3版+
每日一句：A friend and
每日一句：Theres no tu
经典__悟透JavaScript
相关专题
相关专题列表
同一个页面可以多次使用
支持xthml的滑门滑块效果
滑动门 三种简洁的Tab导
滑块切换效果菜单
滑块导航栏
滑块菜单导航
超酷滑动门
伟哥博客
西安房产
123最新电影
三四六四
关于站点
|
免责声明
|
联系站长
|
网站地图
|
陕ICP备07002804号
WEB技术QQ交流群：72840059
©2007 ffasp.com. 版权所有
