<!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>test</title>
<style type="text/css">
<!--
* {
margin: 0; padding:0
}
body {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
text-align: center;
height: auto;
width: auto;
background-color: #666666;
font-size: 12px;
color: #000000;
}
#container {
text-align: left;
width: 800px;
height: 400px;
background-color: #FFFFFF;
padding: 20px;
}
#container #title {
height: 28px;
}
#container #title li {
float: left;
list-style-type: none;
height: 28px;
line-height: 28px;
text-align: center;
margin-right: 1px;
}
#container #title ul {
background-color: #FFFFFF;
height: 28px;
}
#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -29px;
}
#container #title a span{
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -29px;
padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -87px;
padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right 0px;
padding: 0 15px 0 15px;
}
#container #title #tag3 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -58px;
padding: 0 15px 0 15px;
}
#container #title #tag4 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -145px;
padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #title .selectli1 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -87px;
}
#container #title a .selectspan1 {
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -87px;
padding: 0 15px 0 15px;
}
#container #title .selectli2 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left 0px;
}
#container #title a .selectspan2 {
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right 0px;
padding: 0 15px 0 15px;
}
#container #title .selectli3 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -58px;
}
#container #title a .selectspan3 {
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -58px;
padding: 0 15px 0 15px;
}
#container #title .selectli4 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -145px;
}
#container #title a .selectspan4 {
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -145px;
padding: 0 15px 0 15px;
}
#container #title .selectli5 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -174px;
}
#container #title a .selectspan5 {
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
height: 150px;
padding: 10px;
}
.content1 {
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #66A9E6;
border-right-color: #66A9E6;
border-bottom-color: #66A9E6;
border-left-color: #66A9E6;
background-color: #fafafa;
}
.content2 {
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #66A9E6;
border-right-color: #66A9E6;
border-bottom-color: #66A9E6;
border-left-color: #66A9E6;
background-color: #fafafa;
}
.content3 {
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #66A9E6;
border-right-color: #66A9E6;
border-bottom-color: #66A9E6;
border-left-color: #66A9E6;
background-color: #fafafa;
}
.content4 {
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #66A9E6;
border-right-color: #66A9E6;
border-bottom-color: #66A9E6;
border-left-color: #66A9E6;
background-color: #fafafa;
}
.content5 {
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #66A9E6;
border-right-color: #66A9E6;
border-bottom-color: #66A9E6;
border-left-color: #66A9E6;
background-color: #fafafa;
}
.hidecontent {display:none;}
-->
</style>
<script language="javascript">
function switchTag(tag,content)
{
// alert(tag);
// alert(content);
for(i=1; i <6; i++)
{
if ("tag"+i==tag)
{
document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
}else{
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
}
if ("content"+i==content)
{
document.getElementById(content).className="";
}else{
document.getElementById("content"+i).className="hidecontent";
}
document.getElementById("content").className=content;
}
}
</script>
</head>
<body>
<div id="container">
<div id="title">
<ul>
<li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1"> 选项一</span></a></li>
<li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>选项二</span></a></li>
<li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>选项三</span></a></li>
<li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>选项四</span></a></li>
<li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>选项五</span></a></li>
</ul>
</div>
<div id="content" class="content1">
<div id="content1"><p>NBA</p>乔丹</div>
<div id="content2" class="hidecontent">韦德</div>
<div id="content3" class="hidecontent">詹姆斯</div>
<div id="content4" class="hidecontent">科比</div>
<div id="content5" class="hidecontent">保罗</div>
</div>
</div>
</body>
</html>
分享到：
咋不给个效果图呢：）
相关推荐
在Android应用开发中，Fragment是UI组件的一种，它允许开发者在一...在Android_uplooking_day2这个压缩包文件中，可能包含了一些示例代码或教程，你可以参考这些内容进行学习和实践，加深对Fragment选项卡实现的理解。
在这个主题中，我们将深入探讨如何使用 HTML 和 CSS 实现一个简洁的选项卡功能。 首先，HTML 结构是构建选项卡的基础。一个简单的选项卡通常包含一个容器（如`<div>`），里面有两个主要部分：一个是用于显示选项卡...
本文将深入探讨如何使用View组件在Android中实现选项卡功能，结合具体的项目实践分享相关知识。 首先，我们需要理解Android中的View组件。View是Android UI系统的基本构建块，它是所有可视元素的基类，包括按钮、...
这个简单的示例展示了如何通过JavaScript实现选项卡功能，当用户点击不同的选项卡头时，对应的标题栏内容会被显示出来。通过结合HTML的结构、CSS的样式控制和JavaScript的交互逻辑，我们可以创建出符合用户需求的、...
在这个选项卡实现中，可能使用了`getElementById`、`getElementsByClassName`等方法获取特定元素，然后通过修改`style`属性来控制元素的显示和隐藏。 7. **数据存储**：为了记住用户的选择，可以使用JavaScript的`...
在这个"ASP.NET源码——网页选项卡(div+CSS).zip"压缩包中，我们主要关注的是如何在ASP.NET中实现基于div和CSS的网页选项卡功能。 选项卡是网页设计中常用的一种交互元素，它帮助用户在有限的空间内组织和展示多个...
在这个选项卡实现中，ActivityGroup可能被用来在同一个父Activity内启动和管理多个子Activity，以达到选项卡切换的效果。然而，由于ActivityGroup存在一些问题，如内存泄漏和生命周期管理复杂等，所以在现代Android...
### JAVA选项卡实现知识点 #### 一、概览 本文档介绍了如何在Java Swing中创建一个具有多个选项卡的对话框。此对话框通常用于显示系统属性或设置页面，每个选项卡代表不同的设置类别（例如“常规”、“计算机名称...
在这个主题中，我们将深入探讨这些概念，并结合"126table_menu"这一文件名，推测这是一个关于表格样式的菜单选项卡实现。 首先，菜单选项卡是网页设计中的一个常见组件，它将大量内容组织成多个独立的部分，每个...
这些库提供了现成的选项卡实现，开发者只需要配置相应的属性和事件即可。 对于桌面应用，例如在Windows或macOS中，选项卡功能可能需要利用操作系统提供的API或者使用特定的UI库，如Qt、wxWidgets或JavaFX。在这些...
Android底部选项卡各种实现Demo 有注释 加Q 77209302 观看更多demo
在Android应用开发中，`ViewPager`是一个非常常用的组件，它允许用户通过左右滑动来浏览多个页面，通常用于实现选项卡切换的效果。本教程将详细讲解如何使用`ViewPager`配合`Fragment`来创建一个功能完备的选项卡...
【JavaScript简易选项卡实现】 在网页设计中，选项卡（Tab）是一种常见的用户界面元素，它可以帮助用户组织和浏览大量信息。"js简易选项卡"就是一种轻量级的JavaScript解决方案，用于创建功能完备的选项卡组件。这...
在本例中，提到的“滑动门”技术是一种常见的选项卡实现方法，它利用JavaScript来改变内容区域的显示与隐藏，模拟滑动门开关的效果，使内容在不同的选项卡之间平滑过渡。 滑动门选项卡EasyTabs1.2可能是一个开源...
以上就是一个基本的HTML切换选项卡实现。 7. **优化与扩展**： - 添加动画效果，如淡入淡出、滑动等，增强用户体验。 - 增加键盘导航支持，符合无障碍标准。 - 使用CSS预处理器（如Sass或Less）来编写更灵活...
JavaScript（JS）是一种轻量级的脚本...这个简单的选项卡实现只是一个起点，实际项目中可能需要考虑更多的交互细节和优化，如动画过渡、键盘导航、触摸支持等。不过，这已经足够作为理解JS动态交互功能的一个基础示例。
总之，ASP.NET结合JavaScript和CSS，为开发者提供了灵活且高效的选项卡实现方式。无论选择服务器端控件还是客户端脚本，都可以创建出美观、动态且功能强大的选项卡，从而提升用户在Web应用程序中的体验。
在选项卡实现中，可能会用到`$(selector).hide()`（隐藏元素）、`.show()`（显示元素）、`.addClass()`（添加类名）等。 3. 事件处理：jQuery允许我们轻松地绑定事件监听器，例如`click`事件。当用户点击选项卡时，...
总结来说，`TabHost`是Android早期的选项卡实现，它通过`TabWidget`来显示选项卡，`FrameLayout`来承载内容。开发者可以通过`TabHost.TabSpec`来定义选项卡的外观和行为，通过Intent来连接选项卡和其对应的内容。...
虽然在最新的Android SDK中，`TabActivity`已经被废弃，取而代之的是`FragmentTabHost`和`ViewPager`等组件，但理解`TabActivity`的源码仍然是学习Android历史和选项卡实现原理的重要一步。 `TabActivity`实际上是...