zisetoufa
- 浏览: 319245 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
如果这就是爱情：
有相应的CSS和JS代码吗?
div+css js按钮特效 鼠标移上去显示子菜单 -
awaterway：
正好要用。哈哈哈哈。。
java调用window的cmd的ping指令 -
一江山：
...
Eclipse 项目有红感叹号 -
autorun：
...
Eclipse 项目有红感叹号 -
本色是本色：
试了 好像不行哦
form表单中enctype="multipart/form-data"的意思
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="爱JavaScript中文网 http://www.ijavascript.cn/" />
<meta name="description" content="DIV+CSS选项卡" />
<meta content="DIV+CSS选项卡" name="keywords" />
<title>DIV+CSS选项卡演示-爱JavaScript中文网</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="http://www.ijavascript.cn"><span>使该元素在FireFox下获得高度从而显示背景</span></a></li>
<li><a href="http://www.ijavascript.cn"><span>为了保证浏览器的兼容性</span></a></li>
<li><a href="http://www.ijavascript.cn"><span>文本对齐方式改回默认left</span></a></li>
<li><a href="http://www.ijavascript.cn"><span>左右自适应[FireFox居中方式]</span></a></li>
<li><a href="http://www.ijavascript.cn"><span>内容对齐方式为居中[IE居中方式]</span></a></li>
<li><a href="http://www.ijavascript.cn"><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="http://www.ijavascript.cn"><img src="http://www.ijavascript.cn/templates/logo/logo.gif" alt="播放软件下载" /></a>
<a href="http://www.ijavascript.cn"><img src="http://www.ijavascript.cn/templates/logo/logo.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://www.ijavascript.cn"></iframe></div>
</li>
<li id="tab4"><h3><a href="####" onClick="javascript:toggleTo(4)">客服</a></h3>
<div id="oDIV4" style="display:none;"><a href="http://www.ijavascript.cn">JavaScript教程网</a></div>
</li>
</ul>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="爱JavaScript中文网 http://www.ijavascript.cn/" />
<meta name="description" content="DIV+CSS选项卡" />
<meta content="DIV+CSS选项卡" name="keywords" />
<title>DIV+CSS选项卡演示-爱JavaScript中文网</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="http://www.ijavascript.cn"><span>使该元素在FireFox下获得高度从而显示背景</span></a></li>
<li><a href="http://www.ijavascript.cn"><span>为了保证浏览器的兼容性</span></a></li>
<li><a href="http://www.ijavascript.cn"><span>文本对齐方式改回默认left</span></a></li>
<li><a href="http://www.ijavascript.cn"><span>左右自适应[FireFox居中方式]</span></a></li>
<li><a href="http://www.ijavascript.cn"><span>内容对齐方式为居中[IE居中方式]</span></a></li>
<li><a href="http://www.ijavascript.cn"><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="http://www.ijavascript.cn"><img src="http://www.ijavascript.cn/templates/logo/logo.gif" alt="播放软件下载" /></a>
<a href="http://www.ijavascript.cn"><img src="http://www.ijavascript.cn/templates/logo/logo.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://www.ijavascript.cn"></iframe></div>
</li>
<li id="tab4"><h3><a href="####" onClick="javascript:toggleTo(4)">客服</a></h3>
<div id="oDIV4" style="display:none;"><a href="http://www.ijavascript.cn">JavaScript教程网</a></div>
</li>
</ul>
</div>
</body>
</html>
分享到：
发表评论
-
js将json数组对象属性的date显示出来
2016-06-28 11:39 753java里面时间类型转换成json数据就成这样了 " ... -
select 由左边框移动到右边示例
2015-05-05 15:46 753<script type="text/java ... -
jQuery ajax级联二级菜单(转)
2014-10-15 16:33 854默认查出一级分类的第一条数据，和一级分类第一条对应的二级分类条 ... -
js 操作select的option
2014-04-09 14:21 1097注意:Option中的O是要大写的，不然语法报错 1. ... -
js 操作select的option
2014-04-09 14:20 1032注意:Option中的O是要大写的，不然语法报错 1.动态 ... -
在jsp页面获取后台json数据
2014-01-03 17:57 9480后台传过来的是一个JsonArray数组 var a = [ ... -
用js动态改变css样式表
2013-08-13 10:36 3746用setAttribute方法实现一个页面两份样式表的效果，具 ... -
＜meta http-equiv=名称 content=值＞
2013-04-27 16:36 1156meta是html语言head区的一个辅助性标签。几乎所有的网 ... -
java读取配置文件的几种方法
2013-04-15 12:15 882一.读取xml配置文件 package chb.demo.vo ... -
java如何做到判断一个字符串是否是数字
2013-04-12 11:25 1089public class NumberDemo { pub ... -
ajax提交并根据返回的值重写标签
2013-04-12 11:09 1546Jsp: function saveCalendar(id) ... -
EL表达式截取字符串
2013-04-12 11:06 975<%@ taglib prefix="fn&q ... -
网页JS弹出广告代码
2013-04-08 11:45 4142借鉴：网页JS弹出广告代码，头部，右下角，网页中漂浮，对联广告 ... -
HTML页面宽度自适应
2013-03-28 10:36 6447<meta name="viewport&qu ... -
js document.createElement 浏览器兼容处理
2013-03-22 11:36 51111：innerText IE支持，FIREFO ... -
jsp中js实现点击按钮更改背景图片
2013-03-04 13:46 6081<script> function myc ... -
Javascript 获取某个a标签的href并进行分解
2013-03-04 12:43 2321问题背景： 原网页中已经有如下代码，且不能更改，class标签 ... -
在网页中嵌入百度搜索条
2013-02-27 15:09 1507<html> <head> ... -
网页上显示天气预报信息的代码
2013-02-27 11:48 1889（将代码拷贝到你的网页上即可，当然，天气预报只能在联网的情况下 ... -
js操作时间（年-月-日 时-分-秒 星期几）
2013-02-27 11:46 1059<script type="text/java ...
相关推荐
在这个"ASP.NET源码——网页选项卡(div+CSS).zip"压缩包中，我们主要关注的是如何在ASP.NET中实现基于div和CSS的网页选项卡功能。 选项卡是网页设计中常用的一种交互元素，它帮助用户在有限的空间内组织和展示多个...
**文件名“DIV表格+JS选项卡”** 这个文件名可能包含了一个使用`<div>`元素和JavaScript实现的选项卡示例，其中“表格”可能是指使用表格布局或者与表格数据相关的选项卡内容。JavaScript通常用于处理用户的交互...
这里的CSS主要设置了`div`元素的布局和样式，例如，`display: flex`用于创建弹性布局，`cursor: pointer`让选项卡标题具有鼠标悬停效果，`border-bottom: none`移除选中选项卡的下划线，`display: none/block`控制...
在本实例中，我们利用`div`、`css`以及`js`来创建一个功能完善的选项卡组件。下面将详细介绍这三个方面的知识。 1. **HTML Div元素** `div`（division）是HTML中的一个块级元素，常被用作容器，用来组合其他HTML...
【标题】：基于Div+CSS实现的多选项卡技术详解 在网页设计中，多选项卡是一种常见的布局方式，它能够有效地组织和展示大量信息，提高用户体验。"div+css 多选项卡"指的是利用HTML的div元素和CSS样式来构建这种功能...
通过这个简单的例子，我们可以看到`DIV+CSS+JavaScript`的结合如何实现一个基本的选项卡功能。这只是前端开发中的一种常见应用，随着技术的发展，还有更多的交互效果和复杂功能等待开发者去探索和实现。希望这个教程...
js+div+css选项卡，可运行html看效果
本项目结合jQuery、div和CSS实现了一个兼容IE6、7、8以及Firefox的选项卡列表样式，适用于新闻文章和图片发布类网站。 首先，让我们深入理解每个部分的作用： 1. **jQuery**：jQuery 提供了一组强大的 API，使得...
本教程将详细介绍如何利用jQuery和CSS技术来创建一款功能完善的选项卡组件，并且需要引入jQuery UI库以增强其表现力和可用性。 首先，我们需要在HTML中设置选项卡的基本结构。这通常包括一个包含所有选项标题的容器...
在本资源包中，"网页模板设计效果图(DIV+CSS 百度有啊JS兼容超强选项卡滑动门封装类库)" 提供了一个具体的设计实例，展示了如何利用现代网页技术来实现一个功能强大的网站界面。以下将详细介绍其中的关键知识点： 1...
javascript+div+css通用的页面选项卡效果
在网页设计中，"Div+Css的Tab菜单"是一种常见的交互式导航元素，它通过将多个页面或内容区域组织在一组选项卡下，为用户提供简洁且直观的浏览体验。Div（层）是HTML中的一个布局容器，而CSS（层叠样式表）则用于控制...
仿网易div+css滑动门选项卡效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
标题提及的"20多个不错的系统页面模板（Div+CSS+图片）"正是这样一套资源集合，它包含了用于构建高效、响应式和视觉吸引人的网页所需的各种元素。 Div+CSS是一种常见的网页布局技术，Div（Division）是HTML中的一个...
本文将深入探讨如何使用JavaScript、CSS和DIV来实现一个功能完善的选项卡组件，其中包括横排和竖排两种布局方式。这个组件不仅能够提升用户体验，还能使页面布局更加整洁有序。 首先，我们来看CSS部分。CSS...
【标题】：“div+css制作Tab选项卡” 【描述】：本文将介绍如何使用HTML的div元素和CSS来创建Tab选项卡，适用于PHP网站的建设。我们将通过Dreamweaver或直接编写代码的方式，逐步解析Tab选项卡的实现过程。 【标签...
本文将详细介绍如何使用JavaScript（js）和层叠样式表（css）来实现一个简单的选项卡切换功能，并通过分析`demo.html`文件来展示具体的实现步骤。 首先，我们需要在HTML文件中创建基本的结构。一个典型的选项卡布局...
本主题“CSS+div选项卡”主要关注如何利用这两者来创建功能性和美观的选项卡组件。选项卡是一种常见的网页布局模式，它允许在有限的空间内展示多个相关但独立的内容区域，通过点击不同的标签来切换显示的内容。 ...
我们可以为每个选项卡和内容区域创建单独的`div`，然后通过CSS控制它们的样式和显示状态。 CSS在构建选项卡式布局中扮演着核心角色。我们可以利用CSS选择器来选中并应用样式到特定的`div`元素，如设置背景颜色、...