<!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:14px;}
ul{margin:0; padding:0; list-style:none;}
li{margin:0; padding:0; float:left; text-align:center; line-height:28px; width:60px; cursor:pointer;}
#box{height:28px; background-color:#7d97a4;}
#textbox{height:40px; border:1px solid #ccc;}
.active{color:#fff; font-weight:900; background-color:#000;}
.normal{color:#000; background-color:#7d97a4;}
.none{display:none;}
</style>
<script type="text/javascript">
function tabfun(a,b){
var c=a.parentNode.id;
var d=document.getElementById(c).getElementsByTagName("li");
for(i=0; i<d.length;i++){
if(i==b){
a.className="active";
document.getElementById(c+"_"+i).style.display="block";
}
else{
d[i].className="normal";
document.getElementById(c+"_"+i).style.display="none";
}
}
}
</script>
</head>
<body>
<div id="box" align="center">
<ul id="tabbox">
<li class="active" onclick="tabfun(this,0)">菜单一</li>
<li class="normal" onclick="tabfun(this,1)">菜单二</li>
<li class="normal" onclick="tabfun(this,2)">菜单三</li>
<li class="normal" onclick="tabfun(this,3)">菜单四</li>
<li class="normal" onclick="tabfun(this,4)">菜单五</li>
<li class="normal" onclick="tabfun(this,5)">菜单六</li>
</ul>
</div>
<div id="textbox">
<div id="tabbox_0">我是谁？</div>
<div id="tabbox_1" class="none">你是谁？</div>
<div id="tabbox_2" class="none">她是谁？</div>
<div id="tabbox_3" class="none">谁是谁？</div>
<div id="tabbox_4" class="none">你是我的谁？</div>
<div id="tabbox_5" class="none">她是你的谁？</div>
</div>
</body>
</html>
分享到：
相关推荐
在“css+div选项卡”的压缩包中，可能包含了一个HTML文件和一个CSS文件，它们分别展示了如何编写HTML结构和CSS样式来创建这种选项卡。通过分析这些文件，你可以了解到实际应用中的具体实现细节，包括具体的CSS选择器...
例如，以下是一个简单的选项卡实现示例： ```javascript document.addEventListener('DOMContentLoaded', function() { var tabs = document.querySelectorAll('.tab-title'); var contents = document....
3. **JavaScript初始化**：设置默认选中的选项卡，通常选择第一个。 4. **事件处理**：添加点击事件监听器到每个选项卡标题，当点击时更新选中状态并显示对应的内容区域。 5. **动画效果**（可选）：根据需求添加...
这个文件名可能包含了一个使用`<div>`元素和JavaScript实现的选项卡示例，其中“表格”可能是指使用表格布局或者与表格数据相关的选项卡内容。JavaScript通常用于处理用户的交互行为，例如在点击选项卡时动态切换...
这个"网页选项卡(div+CSS) v1.0_wyxx"文件可能是实现上述功能的一个具体实例，包含了完整的源代码，可以帮助开发者理解如何在实际项目中应用div和CSS来创建ASP.NET选项卡。通过研究和学习这个源码，你可以深入了解...
"CSS+DIV流畅的选项卡"是一个常见的交互设计模式，用于展示分块信息并提供用户友好的导航。这种设计通常应用于网站的头部、产品展示、新闻列表等多个场景，以节省空间并提高用户体验。下面我们将深入探讨如何使用CSS...
"很不错的CSS+DIV选项卡"是一个示例项目，展示了如何利用这两者来创建功能强大的选项卡组件。这种组件常用于展示有限空间内的大量信息，如产品详情、用户评论或菜单导航等。 首先，CSS在选项卡设计中起到关键作用。...
其次，JavaScript（JS）是网页的脚本语言，它为菜单选项卡提供了更丰富的交互功能： 1. **动态切换**：JS可以监听用户的点击事件，实现选项卡内容的动态切换，而不是简单的页面跳转。例如，当用户点击一个选项时，...
简单的css+js tab选项卡效果。只需用html和css。。加简单的js效果控制
总的来说，CSS+JS实现的选项卡效果(html组件)是一个综合运用前端三大核心技术的实例，它展示了HTML的结构化能力、CSS的美化功能以及JavaScript的交互性。理解和掌握这个效果，对于提升网页交互体验和增强开发者技能...
通过这个简单的例子，我们可以看到`DIV+CSS+JavaScript`的结合如何实现一个基本的选项卡功能。这只是前端开发中的一种常见应用，随着技术的发展，还有更多的交互效果和复杂功能等待开发者去探索和实现。希望这个教程...
在这个案例中，我们关注的是一个使用CSS（层叠样式表）和HTML的div元素构建的滑动选项卡。这种技术广泛应用于网站设计，特别是那些需要在首页突出显示多个板块内容的场合，如产品展示、新闻更新或用户评价等。 首先...
"CSS+JS常用网页选项卡打包"是一个集合了多种不同实现方式的资源包，它涵盖了使用CSS样式和JavaScript脚本来创建网页选项卡的常见方法。下面将详细介绍这些技术以及它们的应用。 **CSS（层叠样式表）** 1. **选择...
一个基本的tab选项卡结构通常包含一个容器（如`<div>`），里面嵌套着一组tab标题（可以是`<a>`或`<button>`标签）和与之对应的隐藏内容区域（例如`<div>`）。每个标题与对应的内容区域之间通过类名或ID进行关联，以...
本文将详细介绍如何使用JavaScript（js）和层叠样式表（css）来实现一个简单的选项卡切换功能，并通过分析`demo.html`文件来展示具体的实现步骤。 首先，我们需要在HTML文件中创建基本的结构。一个典型的选项卡布局...
通过以上步骤，我们就成功地用CSS和JavaScript实现了一个基本的水平选项卡功能。这个功能允许用户在不离开当前页面的情况下切换不同的内容块，提高了用户体验。在实际项目中，你可能还需要考虑添加更多的特性，如...
我们使用CSS来隐藏除了第一个面板之外的所有内容，并为选项卡添加样式： ```css .tabs { list-style: none; margin: 0; padding: 0; } .tabs li { display: inline-block; } .tabs a { display: block; ...
本项目结合jQuery、div和CSS实现了一个兼容IE6、7、8以及Firefox的选项卡列表样式，适用于新闻文章和图片发布类网站。 首先，让我们深入理解每个部分的作用： 1. **jQuery**：jQuery 提供了一组强大的 API，使得...
综上所述，“超级翻页的选项卡”是一个结合了CSS和JavaScript技术的高级网页交互元素，它不仅提供了美观的视觉效果，还具备优秀的用户体验。通过熟练掌握这些技术，开发者能够创建出更吸引用户、更易用的网页应用。...
这个简单的例子展示了如何利用jQuery和CSS来创建选项卡。jQuery UI库提供了丰富的主题和交互效果，使得选项卡更加易于使用和美观。在实际项目中，你可以根据需求自定义CSS样式和jQuery事件，以实现更多功能，比如...