导读：大家写博客的时候有没有注意博客园的标题选项卡的效果是如何实现的？
如上图当我们点击文章时会自动切换到文章类型下。其他也是一样的。其实这种选项卡的效果在很多网站中出现。好啦现在我们来用jQuery和css来实现一下。
效果图：
步骤：一：使用div+css画出基本的界面。
二：jQuery实现动态效果。
哥们，如果你接触过WPF，这种思想是不是与WPF极其的相似。WPF中XAML语言画界面，C#写后台逻辑。
好啦，不解释啦。源码如下：
<!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">
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
body{padding:100px;font-size:15px;}
ul{list-style-type:none;line-height:30px;height:30px;}
.box ul li{float:left;padding:0 10px; position:relative; border:solid 1px #000;margin-right:5px;border-bottom:none;cursor:pointer;}
.content{border:solid 1px #000;300px;height:100px;padding:10px;background:#5CACEE;}
.onecolor{background:#5CACEE;}
.twocolor{background:red;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".ct:gt(0)").hide(); //页面加载时只显示标题一的内容其余隐藏
$(".box ul li:first").addClass("onecolor");
$(".box ul li").click(function () {
$(this).addClass("onecolor").siblings().removeClass("onecolor");
var index = $(".box ul li").index(this); //索引进行匹配标题一对应标题一的内容索引，其他原理一样
$(".ct").eq(index).show().siblings().hide();
});
$(".box ul li").hover(function () {
$(this).addClass("twocolor").siblings().removeClass("twocolor");
});
});
</script>
</head>
<body>
<div class="box">
<ul>
<li class="one">公司简介</li>
<li>公司动态</li>
<li>公司发展</li>
</ul>
<div class="content" id="divcontent">
<div class="ct">本公司位于珠三角地区的铜锣湾大药房</div>
<div class="ct">最近公司欢迎了郑伊健同学来我们公司拍黑社会电影</div>
<div class="ct">本公司计划发展成为全香港最大的黑社会集团专门从事黑夜性的活动</div>
</div>
</div>
</body>
</html>