jQuery制作Tabs

作者：大漠 日期：2011-10-14 点击：354
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

返回顶部