<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ font-size:12px;}
.sec,.sec1{ cursor:pointer;}
.sec{ color:#FFFFFF; font-weight:bold; text-align:center; background-color:#990000;}
.sec1{ color:#990000; text-align:center; background-color:#FFFFFF;}
div{ line-height:22px;}
</style>
<script language="javascript">
function $(id){
return document.getElementById(id);
}
function xxk(num,id,ii,iii)
{
//alert(ii);
var dq;
for(var i=1;i<=num;i++)
{
if(i==id){
dq=$(ii+i).className='sec'; //当前选项
$(iii+i).style.display="block";
}
else
{
dq=$(ii+i).className='sec1';
$(iii+i).style.display="none";
}
}
}
</script>
</head>
<body>
<table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000">
<tr>
<td class="sec" id="t1" onmouseover="xxk(5,1,'t','tt')">选项卡1</td>
<td bgcolor="#FFFFFF" id="t2" class="sec1" onmouseover="xxk(5,2,'t','tt')">选项卡2</td>
<td bgcolor="#FFFFFF" id="t3" class="sec1" onmouseover="xxk(5,3,'t','tt')">选项卡3</td>
<td bgcolor="#FFFFFF" id="t4" class="sec1" onmouseover="xxk(5,4,'t','tt')">选项卡4</td>
<td bgcolor="#FFFFFF" id="t5" class="sec1" onmouseover="xxk(5,5,'t','tt')">选项卡5</td>
</tr>
<tr>
<td colspan="5" bgcolor="#FFFFFF">
<div id="tt1">选项卡1月在上班</div>
<div id="tt2" style="display:none;">选项卡2月在上班</div>
<div id="tt3" style="display:none;">选项卡3月在上班</div>
<div id="tt4" style="display:none;">选项卡4月在上班</div>
<div id="tt5" style="display:none;">选项卡5月在上班</div>
</td>
</tr>
</table>
<br />
<table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000">
<tr>
<td class="sec" id="ts1" onclick="xxk(4,1,'ts','tts')">选项卡1</td>
<td bgcolor="#FFFFFF" id="ts2" class="sec1" onclick="xxk(4,2,'ts','tts')">选项卡2</td>
<td bgcolor="#FFFFFF" id="ts3" class="sec1" onclick="xxk(4,3,'ts','tts')">选项卡3</td>
<td bgcolor="#FFFFFF" id="ts4" class="sec1" onclick="xxk(4,4,'ts','tts')">选项卡4</td>
</tr>
<tr>
<td colspan="4" bgcolor="#FFFFFF">
<div id="tts1">选项卡1月在上班</div>
<div id="tts2" style="display:none;">选项卡2月在上班</div>
<div id="tts3" style="display:none;">选项卡3月在上班</div>
<div id="tts4" style="display:none;">选项卡4月在上班</div>
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
这里的CSS主要设置了`div`元素的布局和样式，例如，`display: flex`用于创建弹性布局，`cursor: pointer`让选项卡标题具有鼠标悬停效果，`border-bottom: none`移除选中选项卡的下划线，`display: none/block`控制...
5. **交互效果**: 通过JavaScript或者CSS的`:hover`和`:active`伪类，可以为选项卡添加鼠标悬停和点击时的动态效果，提升用户体验。 **标签解析** 标签"DIV+CSS选项卡，很好的选项卡"进一步强调了这个话题的重点，...
在这个项目中，重点在于使用div标签作为选项卡的容器，以及利用CSS来控制样式和布局，实现选项卡的切换效果。 首先，HTML部分通常会包含一系列的div元素，每个div代表一个选项卡的内容面板。这些div可以被设置为...
在本实例中，我们利用`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，使得...
javascript+div+css通用的页面选项卡效果
在本资源包中，"网页模板设计效果图(DIV+CSS 百度有啊JS兼容超强选项卡滑动门封装类库)" 提供了一个具体的设计实例，展示了如何利用现代网页技术来实现一个功能强大的网站界面。以下将详细介绍其中的关键知识点： 1...
仿网易div+css滑动门选项卡效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
本教程将详细介绍如何利用jQuery和CSS技术来创建一款功能完善的选项卡组件，并且需要引入jQuery UI库以增强其表现力和可用性。 首先，我们需要在HTML中设置选项卡的基本结构。这通常包括一个包含所有选项标题的容器...
在网页设计中，"Div+Css的Tab菜单"是一种常见的交互式导航元素，它通过将多个页面或内容区域组织在一组选项卡下，为用户提供简洁且直观的浏览体验。Div（层）是HTML中的一个布局容器，而CSS（层叠样式表）则用于控制...
标题提及的"20多个不错的系统页面模板（Div+CSS+图片）"正是这样一套资源集合，它包含了用于构建高效、响应式和视觉吸引人的网页所需的各种元素。 Div+CSS是一种常见的网页布局技术，Div（Division）是HTML中的一个...
本文将深入探讨如何使用JavaScript、CSS和DIV来实现一个功能完善的选项卡组件，其中包括横排和竖排两种布局方式。这个组件不仅能够提升用户体验，还能使页面布局更加整洁有序。 首先，我们来看CSS部分。CSS...
总结来说，利用JavaScript和CSS+div实现选项卡效果涉及HTML结构的设计、CSS样式的应用以及JavaScript交互逻辑的编写。通过这种方式，我们可以创建一个高效且易于使用的界面，让用户在有限的空间内轻松浏览和切换不同...
【标题】：“div+css制作Tab选项卡” 【描述】：本文将介绍如何使用HTML的div元素和CSS来创建Tab选项卡，适用于PHP网站的建设。我们将通过Dreamweaver或直接编写代码的方式，逐步解析Tab选项卡的实现过程。 【标签...
本主题“CSS+div选项卡”主要关注如何利用这两者来创建功能性和美观的选项卡组件。选项卡是一种常见的网页布局模式，它允许在有限的空间内展示多个相关但独立的内容区域，通过点击不同的标签来切换显示的内容。 ...
我们可以为每个选项卡和内容区域创建单独的`div`，然后通过CSS控制它们的样式和显示状态。 CSS在构建选项卡式布局中扮演着核心角色。我们可以利用CSS选择器来选中并应用样式到特定的`div`元素，如设置背景颜色、...