概述

原来对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

05-21 07:44