<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs li").bind("mouseover", function () {
var index = $(this).index();
var divs = $("#tabs-body > div");
$(this).parent().children("li").attr("class", "tab-nav");//将所有选项置为未选中
$(this).attr("class", "tab-nav-action"); //设置当前选中项为选中样式
divs.hide();//隐藏所有选中项内容
divs.eq(index).show(); //显示选中项对应内容
});
});
</script>
<style type="text/css">
.tabs {
float:left;
background-image: url(themes/images/nav_bg.jpg);
width:100%;
}
.tabs ul
{
list-style: none outside none;
margin: 0;
padding: 0;
}
.tabs ul li
{
float: left;
line-height: 24px;
margin: 0;
padding: 2px 20px 0 15px;
}
.tab-nav{
background-color:#eee;
cursor:pointer;
}
.tab-nav-action{
background-color:red;
cursor:pointer;
}
.tabs-body
{
border-bottom: 1px solid #B4C9C6;
border-left: 1px solid #B4C9C6;
border-right: 1px solid #B4C9C6;
float: left;
padding: 5px 0 0;
width: 100%;
}
.tabs-body div
{
padding:10px;
}
</style>
</head>
<body>
<div class="tabs">
<ul id="tabs">
<li class="tab-nav-action">管理导航</li>
<li class="tab-nav">系统设置</li>
<li class="tab-nav">用户管理</li>
<li class="tab-nav">内容管理</li>
<li class="tab-nav">其他管理</li>
</ul>
</div>
<div id="tabs-body" class="tabs-body">
<div style="display:block">
1111111
</div>
<div style="display:none">
222222222
</div>
<div style="display:none">
33333333333
</div>
<div style="display:none">
4444444444
</div>
<div style="display:none">
555555555555555
</div>
</div>
</body>
</html>
wenrisheng
- 浏览: 283478 次
- 性别:
- 来自: 广州
-
最新评论
-
paladinosment：
你这个spring注解大全，就这么几行，还真是全。。。。。
spring 注解大全 -
samlomg：
我擦！我都进来了，你给我看这个！
shell 写多行命令 -
wenrisheng：
可以，最后就再写上自己的一点新的体会，这样才提高的快！
SSH 包说明和下载路径 -
samlomg：
博主我能转载文章么？
SSH 包说明和下载路径
相关推荐
在探讨如何使用JQUERY Tabs插件宿主IFRAMES之前，首先需要了解什么是JQUERY Tabs插件和IFRAME。JQUERY Tabs插件是JQUERY UI库中的一个组件，它允许开发者轻松地在一个网页上添加选项卡式界面，提升用户体验。而...
在本文中，我们将深入探讨基于jQuery的tabs切换功能，这是网页设计中常见的一种交互元素，用于组织和展示分块内容。jQuery库简化了JavaScript的许多复杂操作，使得实现这种功能变得简单而高效。 首先，"基于jQuery ...
秋天 jQuery tabs 插件是一个基于流行的JavaScript库jQuery开发的组件，用于实现网页中的标签页功能。这个插件允许用户在不同的内容区域之间轻松切换，提高了网页的交互性和用户体验。下面将详细介绍该插件的使用、...
在本示例中，"jQuery tabs切换源码"是指使用jQuery实现的一个选项卡（tabs）功能，它允许用户通过点击不同的标签来切换显示不同的内容区域。 在jQuery中，实现tabs切换通常会涉及到以下几个核心知识点： 1. **选择...
jQuery Tabs是jQuery库中的一个组件，它用于创建交互式的、多面板的用户界面，通常用于展示分段的内容，如不同的章节、产品分类或导航链接。这个组件极大地提升了用户体验，因为它允许用户在一个固定的空间内切换...
在网页设计中，jQuery UI 的 tabs 是一个非常实用的功能，它允许我们将多个内容区域组织成可切换的选项卡，提供了一种整洁的方式来展示大量信息。然而，标准的 jQuery tabs 默认是横向排列的，但有时为了适应页面...
jQuery Tabs插件是一款广泛应用于网页开发中的选项卡组件，它基于流行的JavaScript库jQuery构建，能够帮助开发者轻松实现页面上的内容分块展示。选项卡插件是网页设计中一种常见的交互元素，通过它可以将大量信息...
**jQuery Tabs插件 PWS Tabs** 是一个用于创建交互式、动态内容切换的JavaScript库，专为增强网页的用户体验而设计。它允许开发者轻松地将多个面板组织成一个可滚动的选项卡结构，使得用户可以方便地在不同内容之间...
"自动切换模式Tab选项卡 - Rotating jQuery tabs"是一个基于jQuery的插件，它为网站的导航和信息展示提供了一种高效且吸引用户注意力的方式。Tab选项卡是一种常见的UI设计元素，用于组织和呈现大量信息，使得用户...
jQuery Tabs 是一个流行的JavaScript库jQuery中的一个组件，用于创建功能丰富的选项卡式界面。这个压缩包"jQuery Tabs.zip"很可能包含实现这一功能所需的所有资源，包括CSS样式文件、JavaScript脚本以及可能的示例...
在网页设计中，jQuery UI 的 Tabs 是一个非常实用的功能，它可以帮助我们轻松创建美观且功能齐全的标签式界面。这个“jquery tabs实例”提供了一套完整的JavaScript和CSS代码，用于帮助开发者快速理解和应用jQuery ...
在网页设计中，jQuery的Tabs控件是一种常用的交互元素，用于组织和展示多部分内容，比如文本、图片或视频，让用户可以方便地切换查看。这个控件通过简洁的API和丰富的自定义选项，使得开发者能够轻松地创建出具有...
在本文中，我们将深入探讨"带CSS3过渡动画效果的jQueryTabs选项卡插件"，这是一个结合了jQuery和CSS3技术的高效、轻量级的选项卡解决方案。jQueryTab插件以其简洁的API、响应式设计和丰富的CSS3动画效果为特点，广泛...
**jQuery EasyTabs.js 插件详解** jQuery EasyTabs.js 是一款功能强大且易于使用的轻量级插件，专为创建响应式的Tab式布局而设计。它允许开发者通过简单的配置选项和自定义事件来实现各种Tab切换效果，为网页内容...
标题中的“简易版的jquery tabs”指的是一个使用jQuery库实现的简单版标签页功能。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。在网页设计中，标签页（tabs）...
《jQuery的Tabs插件1.0(20140301)详解与实践》 在Web开发中，Tab组件是一种常见的用户界面元素，它能够有效地组织和展示大量信息，提高用户体验。jQuery是一个轻量级、高性能的JavaScript库，为开发者提供了丰富的...
这款名为"简单响应式jQuery Tabs选项卡插件"的工具正是为了实现这一目标而设计的。它是一个轻量级的JavaScript解决方案，利用jQuery库的强大功能来创建灵活的选项卡组件，能够自动适应屏幕大小，确保在桌面、平板...