＞
设为首页
＞
收藏本站
＞
最新电影
首页
运营资讯
今日英语
图形图像
计算机技术
Asp编程
网站结构化
资源共享
休闲娱乐
访问新站
> 子栏目
Asp
|
Jsp
|
XML
|
XSL
|
Div+Css
|
自定义函数
|
数据库
|
脚本特效
您现在的位置：
首页
=>
后台技术
=>
div+css
订阅本栏目
多点调用的 选项卡
时间： 2007-09-25 09:32:47 阅读次数：3425
<html> <head> <style> body { text-align:center; } .tab { width:432px; height:208px; margin:0 auto; overflow:hidden; border:1px solid #cccccc; } .menu,.menu li { margin:0; padding:0; height:24px; list-style:none; overflow:hidden; text-align:center; } .menu { border-bottom:1px solid #cccccc; } .menu .default { width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat; } .menu .active { width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; font-weight:bold; color:#FFFFFF; background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat; } #more { width:76px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url('bg.jpg') no-repeat; color:#FF0000; font-weight:normal; text-align:right } .con { width:422px; height:184px; margin:0 auto; } </style> <head> <body> <script> function init(ids,cons,dis){ document.getElementById(ids).getElementsByTagName('li')[0].className='active'; document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML; // document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis);}//鼠标指向激发效果 document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis);}//点击激发效果 } function onmousOver(ids,cons,dis){ o = o || window.event; var obj=o.target || o.srcElement; if (obj.tagName=='LI'){ if (obj.className=='active'||obj.id=='more')return; var o=document.getElementById(ids).getElementsByTagName('li'); for (var i=0;i<=o.length-1;i++){o[i].className='default'} obj.className='active'; if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;} } } </script> <!--#1--> <div class='tab'> <ul id='nav1' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="l5" class='default'>第5新闻</li> </ul> <div class='con' id='con1'> </div> </div> <div style="display:none"> <div id="div1_l1"> <span>要做一个选项卡<a href="http://www.ffasp.com">，</a>在论坛里找了好久都没有理想的效果</span> </div> <div id="div1_l2"> <span>所以特来问一下高手们<a href="http://www.ffasp.com">，</a>请大家帮帮忙！</span> </div> <div id="div1_l3"> <span>找了几个来改<a href="http://www.ffasp.com">，</a>都是头部的菜单那里太难定位了</span> </div> <div id="div1_l4"> <span>当鼠标放上去时就变<a href="http://www.ffasp.com">，</a>而不用点了！</span> </div> <div id="div1_l5"> <span>增加了！</span> </div> </div> <script> init('nav1','con1',"div1_"); </script> <!--#2--> <div class='tab'> <ul id='nav2' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="more"><a href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con2'> </div> </div> <div style="display:none"> <div id="div2_l1"> <span>要做一个选项卡<a href="http://www.ffasp.com">，</a>在论坛里找了好久都没有理想的效果</span> </div> <div id="div2_l2"> <span>所以特来问一下高手们<a href="http://www.ffasp.com">，</a>请大家帮帮忙！</span> </div> <div id="div2_l3"> <span>找了几个来改<a href="http://www.ffasp.com">，</a>都是头部的菜单那里太难定位了</span> </div> <div id="div2_l4"> <span>当鼠标放上去时就变<a href="http://www.ffasp.com">，</a>而不用点了！</span> </div> </div> <script> init('nav2','con2',"div2_"); </script> <!--#3--> <div class='tab'> <ul id='nav3' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="more" style="width:160px"><a href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con3'> </div> </div> <div style="display:none"> <div id="div3_l1"> <span>要做一个选项卡<a href="http://www.ffasp.com">，</a>在论坛里找了好久都没有理想的效果</span> </div> <div id="div3_l2"> <span>所以特来问一下高手们<a href="http://www.ffasp.com">，</a>请大家帮帮忙！</span> </div> <div id="div3_l3"> <span>找了几个来改<a href="http://www.ffasp.com">，</a>都是头部的菜单那里太难定位了</span> </div> </div> <script> init('nav3','con3',"div3_"); </script> </body> </html>
提示：您可以先修改部分代码再运行
飞飞Asp技术乐!园
站内搜索
：
标题
内容
下一篇
Div+CSS布局入门教程
上一篇
暂无
本栏目最新
栏目最新列表
微软IE调试工具：SuperPreview for IE(ie6
精选15个国外最流行的CSS框架
CSS2 Media类型使用方法及简介（@Media）
浏览器排版/布局 图片下方出现空隙的问题
使用IE浏览器a链接失效（不能点击）的解决方
网站优化策划
栏目最新列表
增加网站外链的快速方法
网站上线前必做的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的滑门滑块
经典的选项卡/滑门显
伟哥博客
西安房产
123最新电影
三四六四
关于站点
|
免责声明
|
联系站长
|
网站地图
|
陕ICP备07002804号
WEB技术QQ交流群：72840059
©2007 ffasp.com. 版权所有
