繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
应用技巧
→ 正文内容
支持IE和FF的div＋css选项卡
发布：dxy 发布日期：
2006-11-18
字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Tab - 飞飞+PR</title> <style type="text/css" media="all"> /*TAB布局*/ #tab * {font-size:12px;} #tab h3 a {display:inline-block;} #tab h3 a {display:block;} #tab {position:relative;} #tab h3,#tab ul,#tab div,#tab li {margin:0;padding:0;list-style-type:none;} #tab ul li {position:absolute;left:0;top:0;float:left;display:block;width:100px;height:30px;font-size:0;} #tab ul li#tab2 {left:100px;} #tab ul li#tab3 {left:200px;} #tab ul li#tab4 {left:300px;} #tab ul li div {position:absolute;clear:both;} #tab ul li div#oDIV2 {left:-100px;} #tab ul li div#oDIV3 {left:-200px;} #tab ul li div#oDIV4 {left:-300px;} /*TAB-标题修饰*/ #tab,#tab ul li div,#tab ul li div li {width:450px;}/* 设置总宽度[width] */ #tab {height:200px;background:#ccc;overflow:hidden;}/* 设置总高度[height]、标题背景颜色[background] */ #tab ul li h3 a {height:18px;padding:5px 0 2px;margin:5px 0px 0px 5px;text-align:center;border:solid #ccc 1px;border-bottom:none;color:#333;}/* 标题默认状态 */ #tab ul li h3 a:hover {background-color:#ddd;border-color:#fff;}/* 鼠标经过状态 */ #tab ul li.up h3 a {background:#999;border-color:#fff #999 #999 #fff;color:#fff;}/* 当前窗口状态 */ #tab ul li div {border:solid #999;border-width:1px 0;background:#f7f7f7;height:167px;}/* 设置内容高度[height]、背景颜色[background]、上下分割线[border] */ /*TAB1效果[ol/li]*/ #tab ul li #oDIV1 ol {margin:8px;padding:0;} #tab ul li #oDIV1 ol li {position:static;float:none;font-size:0;height:auto;} #tab ul li #oDIV1 ol li a {font-size:12px;display:block;padding:5px 0 1px;} /*TAB2效果[img]*/ #tab ul li #oDIV2 img {margin:8px;border:none;} /*TAB3效果[iframe]*/ #tab ul li #oDIV3 iframe {border:none;width:440px;height:157px;margin:5px;} </style> <script type="text/javascript"> <!-- function toggleTo(img) { var ts=document.getElementById("tab").getElementsByTagName("div"); for(i=1;i<ts.length+1;i++){ if(img==i) { document.getElementById("oDIV"+i).style.display = ""; document.getElementById("oDIV"+i).parentNode.className+=" up"; } else{ document.getElementById("oDIV"+i).style.display = "none"; document.getElementById("oDIV"+i).parentNode.className="tab"+i; } } } --> </script> </head> <body> <div id="tab"> <ul> <li id="tab1" class="up"><h3><a href="####" onclick="javascript:toggleTo(1)">支付</a></h3> <!-- onclick鼠标释放，onmousemove鼠标经过。 --> <div id="oDIV1"> <ol> <li><a href="####"><span>使该元素在FireFox下获得高度从而显示背景</span></a></li> <li><a href="####"><span>为了保证浏览器的兼容性</span></a></li> <li><a href="####"><span>文本对齐方式改回默认left</span></a></li> <li><a href="####"><span>左右自适应[FireFox居中方式]</span></a></li> <li><a href="####"><span>内容对齐方式为居中[IE居中方式]</span></a></li> <li><a href="####"><span>内容对齐方式为居中[IE居中方式]</span></a></li> </ol> </div> </li> <li id="tab2"><h3><a href="####" onclick="javascript:toggleTo(2)">软件下载</a></h3> <div id="oDIV2" style="display:none;"> <a href="####"><img src="http://blogbeta.blueidea.com/images/img/Rerl.gif" alt="播放软件下载" /></a> <a href="####"><img src="http://blogbeta.blueidea.com/images/img/linkedu.gif" alt="播放软件下载" /></a></div> </li> <li id="tab3"><h3><a href="####" onclick="javascript:toggleTo(3)">问题答疑</a></h3> <div id="oDIV3" style="display:none;"><iframe frameborder="0" scrolling="auto" src="http://pr.idcx.com"></iframe></div> </li> <li id="tab4"><h3><a href="####" onclick="javascript:toggleTo(4)">客服</a></h3> <div id="oDIV4" style="display:none;"><a href="####">22222</a></div> </li> </ul> </div> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
支持IE和FF的div＋css选项卡
百度中搜索更多的关于
支持IE和FF的div＋css选项卡
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
文章来源
0
顶一下
上一篇文章：
cloneNode实现表格增加删除效果
下一篇文章：
js方块躲避游戏代码
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
解读IE和firefox下JScript和HREF的执行顺
用js获取点击图片的值!
Add Formatted Data to a Spreadsheet
“增强js程序代码的健壮性”之我见大量示
Sample script that displays all of the
我见过最全的个人js加解密功能页面
JS统计Flash被网友点击过的代码
找到了一篇jQuery与Prototype并存的冲突的
琥珀无限级联动菜单-JavaScript版
JavaScript Base64编码和解码，实现URL参
最 近 更 新
模拟弹出窗口效果，关闭层之前，不能选择
几个高效，简洁的字符处理函数
Auntion-TableSort javascript类文件
发表文章时自动保存到剪贴板
分析 JavaScript 中令人困惑的变量赋值
线路分流自动跳转代码；希望对大家有用！
IE与FireFox的兼容性问题分析
记录几个javascript有关的小细节
总结两个Javascript的哈稀对象的一些编程
javascript下过滤数组重复值的代码
热 点 排 行
Div+CSS+JS树型菜单，可刷新
在线游戏大家来找茬II
javascript小技巧 超强推荐
eval(function(p,a,c,k,e,d)系列
动态加载js文件 document.create
Unicode 编码转换器
彻底搞懂JS无缝滚动代码
JavaScript实现Sleep函数的代码
由浅到深了解JavaScript类
支持IE和FF的div＋css选项卡
文章评论
共有 位脚本之家网友发表了评论我来说两句