<!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选择器...
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`的结合如何实现一个基本的选项卡功能。这只是前端开发中的一种常见应用,随着技术的发展,还有更多的交互效果和复杂功能等待开发者去探索和实现。希望这个教程...
"圆角边框"是CSS3引入的一个特性,可以使得元素的边框呈现出柔和的曲线效果,而"TAB选项卡"则是常见的一种网页布局模式,通常用于组织和展示大量内容。"滑动门"是一种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事件,以实现更多功能,比如...