jQuery制作Tabs
Tabs的效果在Web页面制作中，可以说是随处可见，我也知道有关于这样的教程在网上上相当的多，前面本站在《纯CSS3制作Tabs选项卡》中介绍了纯CSS制作的Tabs，而《CSS3+jQuery制作切角的Tabs》介绍了使用CSS3+jQuery制作Tabs的方法。今天依然要介绍的是使用jQuery来制作Tabs，但这种方法相对来说是简单易于理解的，就算我这样的初学者都能理解。
如果你还不知道jQuery是什么东东，你钶以到jQuery官网了解他是什么？也可以浏览下列网站提供的相关教程：1stwebdesigner.com、sohtanaka.com、webdesignerwall.com、learningjquery.com。
HTML Markup
<ul class="tabs"> <li><a href="#tab1">Header1</a></li> <li><a href="#tab2">Header2</a></li> </ul> <div class="tabContent"> <div id="tab1" class="tabBody">content for header1</div> <div id="tab2" class="tabBody">content for header2</div> </div>
我采用了一个无序列表来制作tabs的Header部分，然后相邻的地方放置的是主内容的容器“div.tabContent”，里面对应的是每个内容“div.tabBody”。需要注意的是“在tabs中每个列表项中有一个锚点a，并且定义其“href”属性，这们此处需要做到的一点是，将“tabBody”中设置一个ID，并且ID号是和tabs列表项中a元素的“href”值是相互匹配的，这一点对于我们后面使用jQuery实现日Tabs功能是很重要的”。我们在这个例子中取名为“tab1”、“tab2”只是为了大家更好的理解，在实际应用中，你应该使用关键字或更具有语义化的词语，这样有利于你的SEO优化。
CSS Code
结构完成，大家就想使用CSS来美化这个tabs，但有一个问题我想大多数人都有碰到过，特别是在IE6浏览器下，当是当前状态下同样会显不一条底部的边线，如下图所示：
我是这样解决的：
具体边框颜色需要根据你的设计而定，有一个关键地方就是“就是"li.active"的border-bottom颜色需要设置成当前项的背景色，比如此例为"#fff"色”。具体参阅下面的CSS代码：
/*====tabs标题样式设置====*/
.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;/*设置tabs的高度*/
/*根据上图所示，设置列表ul的左边框和右边框*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;/*=列表项高度设置为比ul高度少1px，=*/
line-height: 31px;/*=设置相同的line-height让元素居中=*/
/*=根据上图显示，设置li的边框，并且左边框不设置=*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;/*=将列表项下拉1px=*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
.tabs a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 10px;
border: 1px solid #fff;
outline: none;
}
.tabs a:hover {
background: #ccc;
}
.tabs li.active,
.tabs li.active a:hover {
background: #fff;
/*=设置当前tabs项的底部边框，颜色对面和主内容背景色一致=*/
border-bottom: 1px solid #fff;
}
/*==tabs主内容样式设置==*/
.tabContent {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left;
width: 100%;
background: #fff;
}
.tabBody {
padding: 20px;
font-size: 1.2em;
}
jQuery Code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//页面载入时
$('.tabBody:not(:first)').hide();//隐藏除了第一个主内容外的所有内容
$('.tabs li:first').addClass('active');//给第一个tabs标题项加上'active'类
//给列tabs的列表项绑定click事件
$('.tabs li').click(function(){
//当前项加上‘active’类，同时有'active'的相邻项移除'active'类
$(this).addClass('active').siblings('li.active').removeClass('active');
//隐藏所有主内容
$('.tabBody').hide();
//查找tabs标题中a元素的href属性值，以确定激活tabs对应的内容
var activeTab = $(this).find('a').attr('href');
//显示当前项的主内容
$(activeTab).fadeIn('slow');
return false;
});
});
</script>
在写实现tabs功能的脚本之前，我们先要将jQuery的版本库导入进来，如果你还没有jQuery版本库，你可以点击下载jQuery版本库。接下来就是实现Tabs功能的jQuery代码，大家可以参考上面的代码，代码中做了详细的解说，我想你能看得懂的。
上面就是本次介绍的jQuery和CSS制作的一个简单功能的tabs选项卡的全部过程，和实现代码，希望大家喜欢这个教程。如果你有什么意见可以随时给我留言。
如需转载烦请注明出处：W3CPLUS