<HTML>
<HEAD>
<title>自适应宽度的标签导航</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
FONT-SIZE: 14px; FONT-FAMILY: "宋体"
}
OL LI {
MARGIN: 8px
}
#con {
FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 100%;
}
#tags {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 400px; PADDING-TOP: 0px; HEIGHT: 23px
}
#tags LI {
BACKGROUND: url(images/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px
}
#tags LI A {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(images/tagright.gif) no-repeat right bottom; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999; LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION: none
}
#tags LI.emptyTag {
BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px
}
#tags LI.selectTag {
BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px
}
#tags LI.selectTag A {
BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px
}
#tagContent {
BORDER-RIGHT: #ffffff 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #ffffff 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #fff
}
.tagContent {
PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; WIDTH: 576px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 250px
}
#tagContent DIV.selectTag {
DISPLAY: block
}
</STYLE>
<META></HEAD>
<BODY>
<DIV id=con>
<UL id=tags>
<LI><A onClick="selectTag('tagContent0',this)" href="#"> 证据照片 </A> </LI>
<LI class=selectTag><A onClick="selectTag('tagContent1',this)" href="#"> 基本信息 </A> </LI>
</UL>
<DIV id=tagContent>
<DIV class=tagContent id=tagContent0>第一个标签的内容</DIV>
<DIV class="tagContent selectTag" id=tagContent1>第二个标签的内容</DIV>
</DIV>
</DIV>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for(i=0; j=document.getElementById("tagContent"+i); i++)
{
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</SCRIPT>
</BODY></HTML>
分享到：
相关推荐
Tab导航条显示各个Tab的标签，而内容区域则根据用户选择的Tab展示相应的信息。在HTML中，我们可以使用`<div>`标签来创建这两个部分，并通过CSS进行样式设置，使它们看起来像Tab页。 ```html <div class="tab-nav"> ...
首先，`tab2011.css`文件通常包含样式规则，用于定义Tab导航条以及内容区域的布局和样式。例如，它可能包含以下内容： 1. 定义Tab导航条的样式，如背景色、字体、边框等。 2. 设置Tab项的选中状态，例如改变颜色或...
1. **HTML结构**：使用`<ul class="nav nav-tabs">`或`<ul class="nav nav-pills">`创建tab导航条，每个tab项是一个`<li>`元素，其中包含一个`<a>`链接指向对应的tab内容容器。 2. **内容区域**：在页面下方，设置...
导航条（Tab）作为APP内部页面切换的主要工具，其外观和交互设计对于用户的使用感受有着直接影响。本主题主要探讨的是新旧两版Android导航条Tab的外观差异，并通过附带的源代码帮助开发者深入理解如何实现这些变化。...
要实现这样的功能，我们首先需要创建HTML结构，包括TAB导航条和对应的TAB内容区域。每个TAB按钮对应一个内容容器，通常使用`<div>`元素来表示。我们可以用CSS来美化这些元素，如设置背景色、边框、字体样式等。 ...
在Android应用开发中，底部导航条（Bottom Navigation Bar）是一种常见的界面设计元素，它允许用户在应用的主要功能之间轻松切换。通常，底部导航条包含3到5个图标，每个图标代表一个不同的页面或功能。本篇文章将...
- `demo.jpg` 和 `shopping_tab.jpg` 可能是导航条的预览图片，帮助开发者理解设计意图和效果。 4. **HTML 结构**： 虽然没有提供具体的HTML文件，但通常动态导航条的HTML结构会包含`<ul>`和`<li>`元素来创建一个...
在IT行业中，网页设计与开发是一项至关重要的技能，而实例Tab页、导航条和广告条是构建用户友好、交互性强的网站界面的关键元素。这些组件不仅提升了用户体验，也对网站的可导航性和视觉吸引力有着显著影响。在这个...
在C#编程环境中，开发一个简单的侧选栏（也称为导航条）对于构建用户界面（UI）至关重要。这种导航条通常用于提供应用内的导航功能，让用户可以轻松地在不同的功能或视图之间切换。在C/S（客户端/服务器）架构中，...
"蓝色css精美导航 简单、美观 tab导航"是一个专为网页设计者提供的资源，旨在提供一个既实用又美观的导航栏解决方案。这个资源采用纯CSS编写，允许设计师根据个人喜好和项目需求进行定制，比如改变颜色方案。 1. **...
这里，我们获取窗口的滚动位置`wt`，并检查它是否在Tab导航条的顶部(`DT`)之下或者已经滚动到底部。如果在顶部，我们移除`fixed`类，以恢复正常的Tab导航样式；如果在底部，我们选择第一个Tab作为当前选中项。否则，...
这个"CSS Tab Designer 2"工具提供了一系列预设样式和选项，允许用户定制导航条的外观。例如，你可以选择不同的布局，如水平或垂直布局；调整按钮的大小、形状和边框；设置背景色和文字颜色；甚至添加渐变和阴影效果...
此外，提到“动感图标”，我们可以推测这个Tab导航可能包含了一些动态图标或者动画效果，例如渐变、旋转、淡入淡出等，这些可以通过CSS3的动画属性或者jQuery的动画方法实现。动态图标不仅可以吸引用户的注意力，还...
首先，我们需要理解Tab导航的基本结构。通常，Tab导航由两部分组成：HTML结构和CSS样式。HTML部分用于定义各个Tab标签和内容区域，CSS则用于样式化这些元素，使其看起来像Tab。在JavaScript中，我们将处理用户交互，...
本文包含了Bootstrap导航条基础使用方法，供大家参考，具体...比如右侧代码编辑器中就有一个tab导航条的例子，他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式 <li><a>Home</a></li> <li><a>CSS3</a></li>
html的tab导航代码，三种方法，三中选择；别人不懂得时候，我换着代码玩。
这种导航条通常包含一个Tab栏，用于切换不同的内容区域，如“聊天”、“发现”、“我”等。下面将详细讨论如何在Android项目中实现这样一个功能，以及涉及到的关键技术点。 首先，我们需要理解`ViewPager`组件的...
4. **复杂Tab导航条**：在学习网站中，复杂的Tab导航条可以帮助用户快速定位到他们感兴趣的内容。利用jQuery，可以实现动态切换Tab内容，而无需每次点击都刷新整个页面。同时，通过缓存内容和智能预加载，可以保证...
在网页设计中，导航条是不可或缺的元素，它帮助用户在网站中轻松浏览各个部分。本文将详细解析“JS经典导航条免费下载”资源中涉及的JavaScript、CSS以及导航条设计的相关知识点。 首先，JavaScript（JS）是网页...