<!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>
<title>网页选项卡应用</title>
<script type="text/javascript"
src="Jscript/jquery-1.4.2-vsdoc.js">
</script>
<script type="text/javascript"
src="Jscript/jquery-1.4.2.js">
</script>
<style type="text/css">
body{font-size:13px}
ul,li {margin:0;padding:0;list-style:none}
#menu li {text-align:center;float:left;padding:5px;
margin-right:2px;width:50px;cursor:pointer}
#menu li.tabFocus {width:50px; font-weight:bold;
background-color:#f3f2e7;border:solid 1px #666;
border-bottom:0;z-index:100;position:relative}
#content {width:260px;height:80px;padding:10px;
background-color:#f3f2e7;clear:left;
border:solid 1px #666;position:relative;top:-1px}
#content li{display:none}
#content li.conFocus{display:block}
</style>
<script type="text/javascript">
$(function() {
$("#menu li").each(function(index) { //带参数遍历各个选项卡
$(this).click(function() { //注册每个选卡的单击事件
$("#menu li.tabFocus").removeClass("tabFocus"); //移除已选中的样式
$(this).addClass("tabFocus"); //增加当前选中项的样式
//显示选项卡对应的内容并隐藏未被选中的内容
$("#content li:eq(" + index + ")").show()
.siblings().hide();
});
});
})
</script>
</head>
<body>
<ul id="menu">
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul id="content">
<li class="conFocus">我是家居的内容</li>
<li>欢迎您来到电器城</li>
<li>二手市场，产品丰富多彩</li>
</ul>
</body>
</html>
分享到：
相关推荐
通过研究这些文件，你可以学习到如何在.NET环境中构建功能完善的网页选项卡系统，同时掌握母版页和服务器端控件的使用技巧。这将有助于提升你的.NET开发技能，使你能够创建更加动态和交互的Web应用。
网页选项卡是网页设计中的一种常见布局方式，它允许用户在有限的空间内浏览多个相关但独立的内容区域。这种设计模式可以极大地提升用户体验，因为它减少了页面滚动的需求，使得用户能够更直观、更有效地导航和切换...
"web各种样式网页选项卡" 主题涵盖了许多不同的设计方法和技术，旨在使选项卡组件既美观又实用。 1. **基本样式选项卡**： - 通常，选项卡由一组水平排列的标签组成，每个标签对应一个内容面板。 - 激活的选项卡...
在C#编程环境中，网页选项卡的实现是一个常见的需求，特别是在构建桌面应用程序或者Web应用程序时。这个项目提供了基于C#的源代码，旨在创建简单但实用的网页选项卡功能。以下将详细介绍C#中实现网页选项卡的关键...
网页选项卡样式是一种常见的用户界面设计模式，广泛应用于各种网页和应用程序中，使得用户可以在同一页面上方便地切换不同内容区域。在本压缩包文件中，我们关注的是如何使用代码来实现这种效果。 首先，选项卡的...
**可嵌套的JS网页选项卡Tabber**是一种高级的网页设计组件，它不仅提供了基本的选项卡功能，还引入了一种创新的交互模式——选项卡的嵌套。这种技术使得用户界面更加丰富且层次分明，能够更好地组织和展示大量的信息...
在网页设计中，"嵌套的网页选项卡"是一种常见的用户界面元素，它允许用户通过点击不同的选项卡来切换不同的内容区域。这种交互方式既节省空间又提供了良好的用户体验。本主题将深入探讨嵌套选项卡的实现原理、设计...
网页选项卡特效是一种常见的网页设计元素，用于组织和展示大量信息。在网页设计中，选项卡可以帮助用户在有限的空间内浏览多个独立的内容区域，而无需滚动或打开新的页面。这种设计模式提高了用户体验，使得信息的...
本文将深入探讨如何使用纯CSS技术来创建功能强大的网页选项卡，无需JavaScript的参与。 首先，让我们理解选项卡的基本结构。通常，选项卡由两部分组成：标签（tab）和内容面板（content panel）。标签是用户点击的...
在网页设计中，"渐入渐出效果的Tabs网页选项卡"是一种常见的用户交互元素，它为用户提供了一种直观且吸引人的浏览体验。这种效果通过JavaScript实现，利用了CSS3的过渡（Transition）和动画（Animation）特性，使得...
在这个"ASP.NET源码——网页选项卡(div+CSS).zip"压缩包中，我们主要关注的是如何在ASP.NET中实现基于div和CSS的网页选项卡功能。 选项卡是网页设计中常用的一种交互元素，它帮助用户在有限的空间内组织和展示多个...
jQuery Tab 可关闭的网页选项卡特效，网页上的标签效果，每个TAB标签都可以关闭，就像现在主流的163邮箱、QQ邮箱中的效果，模拟出了PC浏览器的效果，选项卡可以无限制增多，超出宽度会出现滚动条，本演示页面中包括...
网页选项卡是网页设计中常见的交互元素，用于在有限的空间内组织多个页面或内容区域，让用户可以方便地在不同选项之间切换。在本资源“网页选项卡，TAB竖向排列.rar”中，重点展示了如何实现一种特殊的布局方式——...
JQuery技术实现网页选项卡 代码： <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> $(function () { $("ul li").click(function () { var indexID = $(this).index(); $(this)....
标题 "漂亮实用可左右切换的TAB网页选项卡.rar" 提供了一个关于网页设计的特定功能——TAB选项卡的实现，这种选项卡具有美观且实用的特点，支持用户通过左右操作在不同页面之间切换。这种交互设计常见于网页头部，...
网页选项卡是现代网页设计中常见的一种用户界面元素，它能有效地组织和展示大量信息，提高用户体验。在“兼容性好的网页选项卡效果”这个主题中，我们将深入探讨如何实现一个既美观又能在多种浏览器环境下良好运行的...
实现选项卡切换功能，功能完善，界面美观，操作方便！
"CSS+JS常用网页选项卡打包"是一个集合了多种不同实现方式的资源包，它涵盖了使用CSS样式和JavaScript脚本来创建网页选项卡的常见方法。下面将详细介绍这些技术以及它们的应用。 **CSS（层叠样式表）** 1. **选择...