选项卡的主要原理是给每个标题栏注册事件,事件处理函数的作用就是显示与某个标题栏对应的选项卡,给它加一个被选中的样式,同时隐藏其他的选项卡,移除被选中的样式。
下面是具体的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选项卡是一款基于CSS3 jQuery实现的动态滑动展示的选项卡Tab效果,选项卡在切换过程中带有动态滑动效果,选项卡内可以防止图片、文本或者图文混排内容。
基于jquery的tab选项卡完美改进版,支持同一个web页面多个选项卡.
HTML+CSS+Jquery实现的tab选项卡特效案例,可以学习一下。导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。这是tab选项卡切换的源代码,...
jQuery纵向tab选项卡内容切换代码,使用纯手写CSS实现。
jQuery纵向tab选项卡内容切换代码
简单的jquery tab选项卡切换代码样式
前段时间刚刚为大家分享过一款jQuery圆角可自由伸缩的Tab选项卡,相当实用。今天要继续分享一款五彩的jQuery Tab选项卡动画插件,它与其他的Tab选项卡不同的是,不仅有多种风格可自由选择切换,而且切换每一个Tab页...
jquery tab插件制作多功能选项卡,鼠标滑过切换选项卡、鼠标点击切换选项卡、自动切换选项卡、支持数据回调功能,也可以与其他插件结合jquery.lazyload,制作选项卡切换图片延迟加载等
jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe...
代码简介:jquery ajax tab选项卡是一款通过鼠标点击导航条标签选项卡滑动切换,内容异步加载选项卡切换;简单的网页模板单页选项卡切换展示。
JQuery做的Tabs选项卡,而且可关闭的选项卡,十分好用哦。
Jquery实现tab页选项卡,简单实用,快熟修改部署
可多次使用的jQuery tab选项卡插件
jQuery tab选项卡切换和新闻资讯列表布局代码.zip
一个基于jquery库TAB选项卡,TAB选项卡点击按钮带有滚动切换,可以兼容各大浏览器
jquery点击tab选项卡
jquery tab选项卡插件滑动选项卡淡隐淡现选项卡 jquery tab选项卡插件滑动选项卡淡隐淡现选项卡 jquery tab选项卡插件滑动选项卡淡隐淡现选项卡
jquery点击tab选项卡.zip