<!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>支持IE和Firefox的div+css选项卡</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:410px;}/* 设置总宽度[width] */
#tab {height:200px;background:#ccc;overflow:hidden;}/* 设置总高度[height]、标题背景颜色[background] */
#tab ul li h3 a {height:18px;padding:5px 0 2px;margin:5px 0px 1px 5px;text-align:center;border:solid #ccc 1px;border-bottom:none;color:#333;}/* 标题默认状态 */
#tab ul li h3 a:hover {background-color:#bbbbbb;border-color:#bbbbbb;}/* 鼠标经过状态 */
#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>
分享到：
相关推荐
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
在这个话题中，我们将深入探讨与图片选项卡相关的编程技术，主要包括HTML、CSS和JavaScript。 HTML（HyperText Markup Language）是网页内容的基础结构语言，用于定义页面元素。在图片选项卡的实现中，HTML通常会...
不规则TAB选项卡效果，用CSS+DIV进行了整理，兼容IE和FF，辛苦整理
CSS样式也是关键，确保选项卡和内容区域的外观。例如： ```css .sidebar { width: 200px; background-color: #f1f1f1; } .sidebar li { list-style-type: none; margin-bottom: 10px; } .sidebar li a { ...
在网页设计中，选项卡是一种常见的用户界面元素，它允许用户在有限的空间内查看和切换多个相关但独立的内容区域。原生选项卡是指利用HTML、CSS和JavaScript等基础Web技术实现的选项卡组件，而非依赖于第三方库如...
首先，jQuery Tab的基本结构通常由HTML的`<div>`和`<ul>`元素组成，其中`<ul>`包含一系列的`<li>`元素作为选项卡标题，每个`<li>`对应一个`<div>`内容区域。在JavaScript部分，我们需要引入jQuery库和jQuery UI库，...
除了静态的HTML和CSS之外，为了让Tab选项卡具备动态的交互功能，我们还需要借助JavaScript来实现内容的切换。这包括监听用户的点击事件，并根据不同的选项卡来显示或隐藏相应的内容。 #### 1. JavaScript实现思路 ...
2. **CSS样式**：标签`css`提示我们这个项目中可能包含了用于美化选项卡和内容区域的CSS样式。这包括设置字体、颜色、布局、边框、背景等，以使整个界面看起来更加专业和吸引人。例如，可以设置选中状态的选项卡和...
- 通过CSS，我们可以设置选项卡和内容区域的基本样式，如颜色、布局、过渡效果等。 - 用伪类（`:active`）来高亮当前选中的选项卡。 - 可能需要设置一些定位（positioning）和溢出（overflow）属性，以便实现滚动...
在这个特定的案例中，"Bootstrap Tabs选项卡切换代码"是对原生Bootstrap选项卡组件的增强，通过CSS3引入了视觉上的美化和动画效果，使得用户体验更加丰富。 首先，我们来看`index.html`文件。这是网页的主体部分，...
同时，描述还指出“本功能非常OK,兼容IE7,FF,IE6”，这意味着这个滑动门设计已经考虑到了对旧版本浏览器，尤其是Internet Explorer 6、7和Firefox的兼容性，这对于需要广泛支持各种浏览器的网页开发者来说是非常重要...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量内容，同时保持页面整洁。jQuery是一个轻量级、功能强大的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果，因此在实现选项卡...
- `#tabContent div` 隐藏所有与选项卡对应的内容区块，直到用户选择某个选项卡。 ##### 2.3 JavaScript逻辑 ```javascript jQuery.fn.tabs = function(control) { var element = $(this); var control = $...
22. **Tab**: 选项卡样式。 - 示例：`<div class="tab">` 23. **List**: 列表样式。 - 示例：`<ul class="list">` 24. **Msg/Tips**: 提示信息。 - 示例：`<p class="msg">`、`<p class="tips">` 25. **Title*...
在网页设计中，选项卡是一种常见的用户界面元素，它能够帮助组织和展示大量信息，同时保持页面整洁。本文将深入探讨如何使用jQuery实现一个简单的选项卡切换功能，并提供相关的代码实例。 首先，jQuery是一个轻量级...
在网页设计中，有时我们需要为用户界面添加交互性，例如当用户选中某个商品时，在其...它不仅可以应用于商品列表，还可以适用于任何需要显示选中状态的场景，如选项卡、复选框等，只需稍作调整即可适应不同设计的需求。
其中，选项卡效果因其简洁美观、节省空间等特点而被广泛应用于各种类型的网站中。本文将详细介绍如何利用Adobe Dreamweaver这款强大的网页设计软件来实现选项卡式的网页效果。 #### 二、所需工具与环境 - **软件**:...
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，因此用jQuery实现Tab选项卡是十分常见且实用的方法。本教程将深入探讨如何使用jQuery创建一个简单的Tab选项卡功能。 首先，我们需要...
- JavaScript则通过`settab_zzjs`函数实现了内容的切换逻辑，当鼠标悬停在某个选项卡上时，会触发相应的事件处理器，更改当前激活的选项卡，并显示对应的内容。 ### 总结 滑动门特效是一种实用且高效的前端技术，...
该示例包含两个标签页：`tab1`和`tab2`，每个标签页都有四个选项卡，对应不同的内容块。 ```html <div id="tab1"> (1,0)" class="now"> (1,1)"> (1,2)">标题三 (1,3)"> </div> <div id="tablist1"> <div ...