选项卡的主要原理是给每个标题栏注册事件，事件处理函数的作用就是显示与某个标题栏对应的选项卡，给它加一个被选中的样式，同时隐藏其他的选项卡，移除被选中的样式。
下面是具体的html，css，javascript代码：
<!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>yensdesign.com - Create a smooth tabbed menu with jQuery</title>
<link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />
<style type="text/css">
* {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a{
text-decoration: none;
}
/******* MENU *******/
#container{
margin: 7em auto;
width: 400px;
}
#container ul{
list-style: none;
list-style-position: outside;
}
#container ul.menu li{
float: left;
margin-right: 5px;
margin-bottom: -1px;
}
#container ul.menu li{
font-weight: 700;
display: block;
padding: 5px 10px 5px 10px;
background: #efefef;
margin-bottom: -1px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
#container ul.menu li.active{
background: #fff;
top: 1px;
border-bottom: 0;
color: #5f95ef;
}
/******* /MENU *******/
/******* CONTENT *******/
.content{
margin: 0pt auto;
background: #efefef;
background: #fff;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}
.content h1{
line-height: 1em;
vertical-align: middle;
height: 48px;
padding: 10px 10px 10px 52px;
font-size: 32px;
}
/******* /CONTENT *******/
/******* NEWS *******/
.content.news h1{
background: transparent url(images/news.jpg) no-repeat scroll left top;
}
.content.news{
display: block;
}
/******* /NEWS *******/
/******* TUTORIALS *******/
.content.tutorials h1{
background: transparent url(images/tuts.jpg) no-repeat scroll left top;
}
.content.tutorials{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu > li").click(function(e){
switch(e.target.id){
case "news":
//change status &amp;amp; style menu
$("#news").addClass("active");
$("#tutorials").removeClass("active");
//display selected division, hide others
$("div.news").fadeIn();
$("div.tutorials").hide();
break;
case "tutorials":
//change status &amp;amp; style menu
$("#news").removeClass("active");
$("#tutorials").addClass("active");
//display selected division, hide others
$("div.tutorials").fadeIn();
$("div.news").hide();
break;
}
return false;
});
});
</script>
</head>
<body>
<div id="container">
<ul class="menu">
<li id="news" class="active">News</li>
<li id="tutorials">Tutorials</li>
</ul>
<span class="clear"></span>
<div class="content news">
<h4>Latest News</h4>
<ul>
<li> Boobles: First theme on Themeforest released!</li>
<li> Cokidoo becomes official</li>
<li> plusmusica.com private beta invitations</li>
<li> yensdesign.com 2.0 launched!</li>
<ul>
</div>
<div class="content tutorials">
<h4>Latest Tutorials</h4>
<ul>
<li> Top 10 free fonts for professional design</li>
<li> Create an amazing music player using mouse gestures &amp;amp;amp;amp; hotkeys</li>
<li> Boobles: First theme on Themeforest released!</li>
<li> Creating AJAX websites based on anchor navigation</li>
<li> Fast Tip: Create your personal blog to promote your self</li>
<li> How to make a brilliant mysql forum database from scratch</li>
<ul>
</div>
</div>
</body>
</html>
分享到：
相关推荐
jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡...
代码简介：jQuery叶子Tab选项卡是一款基于CSS3 jQuery实现的动态滑动展示的选项卡Tab效果，选项卡在切换过程中带有动态滑动效果，选项卡内可以防止图片、文本或者图文混排内容。
本文将深入探讨基于jQuery实现的选项卡组件，特别是“基于jQuery的tab选项卡完美改进版”，它支持在同一web页面上显示多个选项卡。 首先，jQuery是一个轻量级、功能丰富的JavaScript库，它简化了DOM操作、事件处理...
jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe...
在网页设计中，jQuery AJAX Tab选项卡是一种常见且实用的交互设计元素，它极大地提升了用户体验。这个"jquery ajax tab选项卡.zip"文件包含了一个利用jQuery和AJAX技术实现的选项卡切换功能，允许用户在不刷新整个...
HTML+CSS+Jquery实现的tab选项卡特效案例，可以学习一下。导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。这是tab选项卡切换的源代码，...
总结来说，这个jQuery Tab插件提供了一套全面的选项卡解决方案，具备丰富的交互功能和高度的自定义能力，对于创建现代、互动性强的网页界面非常有帮助。无论是个人开发者还是专业团队，都能从中受益，提升项目的质量...
本项目涉及的主题是“jQuery Tab选项卡且可关闭”，这是一个常见的UI组件，用于组织和展示页面上的多部分内容。下面我们将深入探讨这个功能的实现、原理以及相关的jQuery和HTML/CSS知识。 首先，jQuery Tab选项卡的...
"jQuery纵向tab选项卡内容切换代码"是一个专为实现垂直布局的选项卡设计的实例，它允许用户通过点击不同的选项卡来切换显示的内容。在网页布局中，这种垂直排列的选项卡模式可以节省横向空间，尤其适用于空间有限...
jQuery是一款强大的JavaScript库，提供了丰富的功能和简便的API，使得实现复杂的交互效果变得容易，其中包括定位滚动的Tab选项卡效果。本教程将深入探讨如何使用jQuery来创建这种效果。 首先，我们需要理解Tab选项...
jQuery Tab选项卡插件是一种广泛应用于网页开发中的交互式组件，它允许用户通过多个标签页来组织和切换内容。在本案例中，"可多次使用的jQuery tab选项卡插件.zip"是一个包含资源的压缩包，提供了可以重复利用的...
前段时间刚刚为大家分享过一款jQuery圆角可自由伸缩的Tab选项卡，相当实用。今天要继续分享一款五彩的jQuery Tab选项卡动画插件，它与其他的Tab选项卡不同的是，不仅有多种风格可自由选择切换，而且切换每一个Tab页...
"简单的jquery tab选项卡切换代码样式"是指利用jQuery实现的一种常见用户界面元素——选项卡（Tab）的交互功能。选项卡是网页设计中常用的布局方式，它可以有效地组织和展示大量内容，提高用户体验。下面我们将详细...
本资源“jQuery tab选项卡切换和新闻资讯列表布局代码”提供了使用jQuery实现的选项卡切换功能以及新闻资讯列表的布局示例，这对于前端开发者来说是一个非常实用的学习和参考材料。 选项卡切换是网页设计中常见的...
本资源“jQuery纵向tab选项卡内容切换代码.zip”提供了实现垂直方向上的选项卡切换功能的代码示例，这对于创建用户友好的交互式界面非常有用。下面，我们将深入探讨这个主题，并详细解析其关键知识点。 1. **jQuery...
在这个“jQuery纵向tab选项卡内容切换代码”项目中，我们看到一个实现特殊效果的示例，即创建了一个带有箭头的、可自动滑动的纵向选项卡，用户可以通过鼠标悬停在选项卡上来切换显示的内容。这个压缩包包含以下关键...
在本资源中，我们关注的是"78种jQuery特效之TAB选项卡"，这是一种常见的用户界面元素，用于组织和展示大量信息。选项卡允许用户在多个面板间切换，每个面板通常包含不同的内容，如文本、图片或表单。下面将详细探讨...
【基于jQuery库的TAB选项卡】是网页设计中常见的交互元素，用于组织和展示大量信息。在本项目中，我们利用jQuery库实现了一个功能丰富的TAB选项卡，它具备按钮滚动切换的功能，能很好地适应不同浏览器环境，提升了...