<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function changeState(mid)
{
document.getElementsByTagName("body")[0].id=mid;
}//实现换body的id值。。
</script>
<style type="text/css">
body {
font: 100% verdana, arial, sans-serif;
background-color: #fff;
margin: 50px;
}
/* begin css tabs */
ul#tabnav { /* general settings */
text-align: left; /* set to left, right or center */
margin: 1em 0 1em 0; /* set margins as desired */
font: bold 11px verdana, arial, sans-serif; /* set font as desired */
border-bottom: 1px solid #7a96df; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */
}
ul#tabnav li { /* do not change */
display: inline;
}
//1.这里运用选择器，id为tab1的body下面的li中class为tab1的现实样式为下面定义的
body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}
//2.这里运用选择器，id为tab1的body下面的li中class为tab1的现实样式为下面定义的
//这两个显示时用来制造“选中”效果
body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}
ul#tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #7a96df; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #d4e6ef; /* set unselected tab background color as desired */
color: #666; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
}
ul#tabnav a:hover { /* settings for hover effect */
background: #fff; /* set desired hover color */
}
/* end css tabs */
</style>
</head>
<body id="tab1">
//这个是关键，这个tab1让tab1的显示好像被选中了一样。可以用js修改body的id为tab2或tab3.。。实现选中显示。。（看上面的css）
<ul id="tabnav">
<li class="tab1"><a href="tab.html" target="showdiv" onclick="changeState('tab1')">Tab One</a></li>
<li class="tab2"><a href="tab.jsp" target="showdiv" onclick="changeState('tab2')">Tab Two</a></li>
<li class="tab3"><a href="tab.jsp" target="showdiv" onclick="changeState('tab3')">Tab Three</a></li>
<li class="tab4"><a href="tab.jsp" target="showdiv" onclick="changeState('tab4')">Tab Four</a></li></ul>
</body>
<iframe width="100%" border="0" frameborder="0" scrolling="no" id="showdiv" name="showdiv" src="tab.html"></iframe>
</html>
分享到：
相关推荐
HTMLTab分页脚本是一种基于JavaScript库Prototype.js实现的网页组件，主要用于在Web页面中创建交互式的tab式分页效果。这种技术可以帮助用户更有效地组织和展示大量的信息，通过将内容划分为不同的标签页，使得用户...
【标题】"3-9(Tab分页式菜单)"指的是一个关于实现Tab分页式菜单的教程或示例代码的压缩文件。这种菜单是用户界面设计中常见的元素，尤其在网页和应用程序中广泛使用，它允许用户通过点击不同的标签来切换不同的页面...
实践中，我们可能需要学习如何使用CSS选择器精确地定位导航元素，以及如何根据滚动事件动态调整其样式。 总的来说，理解和掌握导航浮动及CSS3分页技术，对于构建现代、用户友好的网页至关重要。通过实践和不断学习...
通常，我们可能会认为这样的交互式效果需要JavaScript来实现，但实际上，利用HTML锚点和CSS选择器，我们可以创建一个简单而有效的tab切换系统。 首先，我们需要理解HTML锚点的工作原理。锚点是HTML中的`<a>`标签，...
CSS选择器可能包括`.pagination a`用于设置链接样式，`.active`用于选中状态，`.disabled`用于禁用状态。 `js`目录中的文件则是JavaScript代码，实现了分页功能的核心逻辑。jQuery提供了便利的方法来操作DOM和处理...
5. **伪类选择器（Pseudo-classes）**：如`:hover`、`:active`和`:focus`等，它们可以触发特定状态下的样式变化，为图片切换增加交互性。 以下是一个简单的图片轮播实现步骤： 1. **HTML结构**：创建一个包含多个...
1. **初始化插件**：在页面加载完成后，通过jQuery选择器找到分页元素，并调用插件的初始化方法，设置必要的参数，如每页显示条数、总页数等。 2. **Ajax请求**：当用户点击分页按钮时，触发Ajax请求，向服务器请求...
这种控件通常包含前后翻页按钮、页码选择器以及当前页数和总页数的显示，帮助用户轻松浏览大量数据。 实现jQuery分页控件的基本步骤如下： 1. **引入jQuery库**：在HTML文件中通过`<script>`标签引入jQuery库，...
1. 分页基础概念：分页是一种用户界面设计技术，用于将大量内容分隔成可管理的小块，用户可以逐页浏览，提高页面加载速度和用户体验。 2. 分页类型： - 数字分页：最常见的方式，显示一系列数字链接，用户点击相应...
在查看器中可以看到一个文档，可以通过选择另一个选项卡来切换活动文档。 选项卡式模式可以与（尤其是工作区窗格热键的循环）一起使用，但是当然可以不使用它。 特征： 单击选项卡以聚焦 与窗格凸版一起使用的...
- 预加载：预测用户可能选择的下一个Tab，提前加载数据，提高切换速度。 - 数据分页：限制每次加载的数据量，避免一次性加载过多数据导致性能下降。 - 缓存策略：对于重复加载的数据，可以考虑缓存，减少服务器...
可能使用到的CSS选择器有类选择器、ID选择器、伪类选择器等，以实现选中状态的高亮和鼠标悬停效果。 JavaScript/jQuery部分主要负责监听用户的点击事件，当用户点击不同的选项卡时，会触发相应的回调函数，这些函数...
CSS3是CSS的最新版本，引入了许多新的特性和功能，如伪元素、选择器增强、动画和过渡效果、多列布局等。"CSS"在这里可能包含了CSS3的一些实例，展示如何利用这些新特性来提升网页设计的创新性和性能。 ...
【jQuery图文布局tab切换代码】是一种常见的网页交互设计，它结合了jQuery库和第三方插件Owl Carousel，用于实现图文信息的动态展示效果。在这个设计中，用户可以通过点击数字索引来控制内容区域进行平滑的上下滑动...
这些参数可能包括direction（滑动方向，通常是'horizontal'），slidesPerView（每次显示的滑块数量），pagination（分页器设置），scrollbar（滚动条设置），autoplay（自动播放）等。 3. **CSS样式**：为了使...
JQuery Tab插件是一种基于流行的JavaScript库JQuery实现的组件，它允许开发者在网页中创建功能丰富的选项卡式布局。这种布局方式可以有效地组织和展示大量内容，提高用户体验，尤其适用于那些需要展示多个独立区域但...
2. **Tab页切换**：利用JQuery的选择器和`hide()`、`show()`方法，可以实现内容区域根据选项卡的切换而显示和隐藏。通过`data-*`属性或自定义属性，可以存储和恢复当前选中的tab状态。 3. **登录表单**：JQuery可以...
4. **CSS3图片特效**：CSS3引入了许多新的选择器、过渡、动画和3D转换等特性，使得图片可以实现如阴影、圆角、旋转、缩放等效果。这个文件可能包含各种创新的图片展示方式，如hover效果、3D视差滚动等。 5. **...
3. **类选择器、属性选择器和伪类**：如`.example`、`[attr=value]`和`:hover`，优先级较低。 4. **元素选择器和伪元素**：如`div`和`::before`，优先级最低。 了解以上内容后，开发者可以更有效地利用Bootstrap...
在JavaScript的世界里，实现类似淘宝网的拼音索引Tab滑动门菜单是一项常见的需求，它能够帮助用户快速定位和浏览大量的分类商品。这种菜单通常会在一个侧边栏展示，显示字母表，用户点击对应的字母时，会滚动显示出...