<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂</title>
<style>
body{
font:normal 12px/20px simsun;
margin:0 auto;
padding:0;
}
*{
margin:0px;
padding:0px;
}
h4{font-size:14px;}
h5{font-size:12px;}
img {border:none;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{
text-decoration:underline;
color:#ffae00;
}
#tab{
width:240px;
margin:0 auto;
text-align:center;
}
.menu{
height:35px;
line-height:32px;
padding-top:1px;
}
.menu a{
display:inline-block;
height:35px;
line-height:35px;
width:116px;
text-align:center;
font-size:20px;
color:#999999;
font-weight:bold;
}
.menu a:hover, .menu a.on{
color:#d33b55;
text-decoration:none;
}
.cnt{border:1px solid #999999; width:240px; height:100px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu a").each(function(i){
$(this).click(function(){
$(".menu a").removeClass("on").eq(i).addClass("on");
$(".cnt").hide().eq(i).show();
return false;
})
})
});
</script>
</head>
<body>
<div id="tab">
<div class="menu">
<a href="#" class="on">蚂一</a>
<a href="#">蚂二</a>
</div>
<div class="cnt">
<ul>
<li>softwhy.com</li>
</ul>
</div>
<div class="cnt" style="display:none;">
<ul>
<li>蚂欢迎您</li>
</ul>
</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.$(".menu a").each(function(i){})，使用each()方法遍历链接a元素。
（3）.$(".menu a").removeClass("on").eq(i).addClass("on")，将所有的链接a元素中的class样式类on删除，然后再将为前点击的a元素添加样式类a。
（4）.$(".cnt").hide().eq(i).show()，将选项卡内容部分隐藏，然后将当前索引的内容元素显示。
（5）.return false，防止链接跳转。
二.相关阅读:
（1）.each()方法可以参阅jQuery each()一章节。
（2）.removeClass()可以参阅jQuery removeClass()一章节。
（3）.eq()方法可以参阅jQuery eq()一章节。
（4）.addClass()方法可以参阅jQuery addClass()一章节。
（5）.return false可以参阅链接中return false的作用是什么一章节。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery