概述
原来对jQuery用的不是很多，主要就是表单验证这些部分，最近想要更深入的学习jQuery和JavaScript编码，就找来了一些视频进行学习，然后就做了这个简单的选项卡示例。视频学习地址见最后。
页面布局
在进行编码之前，最先要做的就是页面布局，开发工具使用的是安装了zenCoding的Notepad++:
布局编码
<body>
<div id="contents">
<input type="button" class='active' value="唐诗" />
<input type="button" value="宋词" />
<input type="button" value="元曲" />
<div style="display:block">
<p>
白日依山尽，<br>
黄河入海流，<br>
欲穷千里目，<br>
更上一层楼。
</p>
</div>
<div>
<p>
问君能有几多愁，<br>
恰似一江春水向东流!
</p>
</div>
<div>
<p>
枯藤老树昏鸦，<br>
小桥流水人家。<br>
古道西风瘦马，<br>
断肠人在天涯。
</p>
</div>
</div>
</body>
Css演示设置
<style type="text/css">
#contents div{
height:200px;
width:200px;
border:1px #000000 solid;
display:none;
position:absolute;
}
.active{
background-color:red;
}
</style>
jQuery类库的引入
为了方便以后版本的查找，使用的是百度在线的CDN库；
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
动态选项卡的实现
页面布局完成以后，就可以开始动态效果的制作了，下面是代码实现：
<script type="text/javascript">
$(function(){
$('#contents').find('input').click(function(){
$('#contents').find('input').attr('class','');
$(this).attr('class','active');
$('#contents').find('div').css('display','none');
$('#contents').find('div').eq($(this).index()).css('display','block');
});
});
</script>
其他
视频课程地址：http://study.163.com/course/courseLearn.htm?courseId=232003
百度CDN地址：http://developer.baidu.com/wiki/index.php?title=docs/cplat/cdn