概述

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

Jquery简单的选项卡实现的更多相关文章

  1. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

  2. 三行Jquery代码实现简单的选项卡

    今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变 其中那个一个div显示,其余全隐藏 实现: <!DOCTYPE h ...

  3. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  4. [js高手之路]jquery插件开发实战-选项卡详解

    在jquery中,插件开发常见的有: 一种是为$函数本身扩展一个方法,这种是静态扩展(也叫类扩展),这种插件一般是工具方法, 还有一种是扩展在原型对象$.fn上面的,开发出来的插件是用在dom元素上面 ...

  5. js进阶 11-24 jquery如何实现选项卡的制作

    js进阶 11-24 jquery如何实现选项卡的制作 一.总结 一句话总结:ul>li做选项卡的选项卡头,多个div做选项卡的内容,点到对应的li,就切换到对应的div,用index()获取l ...

  6. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  7. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  8. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  9. JS入门学习，写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

随机推荐

  1. sql privot

    http://www.studyofnet.com/news/295.html 本文导读:T-SQL语句中,Pivot运算符用于在列和行之间对数据进行旋转或透视转换,PIVOT命令可以实现数据表的列转 ...

  2. 洛谷oj U3936（分成回文串） 邀请码：a0c9

    题目链接:传送门 题目大意:略 题目思路:DP 先预处理,分别以每个字母为中心处理能形成的回文串,再以两个字母为中心处理能形成的回文串. 然后 dp[i] 表示1~i 能形成的数目最少的回文串. 转移 ...

  3. 【BZOJ2090/2089】[Poi2010]Monotonicity 2 动态规划+线段树

    [BZOJ2090/2089][Poi2010]Monotonicity Description 给出N个正整数a[1..N],再给出K个关系符号(>.<或=)s[1..k].选出一个长度 ...

  4. 爬虫实战【13】获取自己的动态代理ip池

    在爬取一些比较友好的网站时,仍然有可能因为单位时间内访问次数过多,使服务器认定为机器访问,导致访问失败或者被封.如果我们使用不同的ip来访问网站的话,就可以绕过服务器的重复验证,使服务器以为使不同的人 ...

  5. [Algorithms] KMP

    KMP is a classic and yet notoriously hard-to-understand algorithm. However, I think the following tw ...

  6. 选项卡jQuery(ele).each()

    $("li").each(index){    $(this).mouseover(fucntion(){           $("div.contentin" ...

  7. 广药帅气外教~看妹纸如何HOLD住

    看他吉他弹的好,看来我要努力练习我的吉他了,一个月了没有任何长进啊. shit~!

  8. 第一份PHP程序

    <?php list($ncase) = fscanf(STDIN,"%d"); $mod = 1000000007; for($n=0;$n<$ncase;++$n) ...

  9. MYSQ无法启动

    http://bbs.51cto.com/thread-433491-1.html http://www.linuxdiyf.com/viewarticle.php?id=97065 http://b ...

  10. python multi process multi thread

    muti thread: python threading: https://docs.python.org/2/library/threading.html#thread-objects https ...