Jquery简单的选项卡实现

概述

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

秒客网