概述

原来对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. 算法之去掉vetor集合中的重复元素

    public class DropRepetition { public static void main(String[] args) { Vector<String> v = new ...

  2. Sql Server 数据库用Transact-SQL语句创建链接服务器

    1.在查询编辑器中,输入以下 Transact-SQL 命令以便链接到名为 SRVR002\ACCTG 的 SQL Server 实例: USE [master] GO EXEC master.dbo ...

  3. [USACO5.5]隐藏口令Hidden Password

    题目链接:传送门 题目大意:给你一个长度 N 的字符串,5<=N<=5,000,000,将首尾合并成环,断环成链并满足字典序最小,输出此时首字母在原串中的位置-1: 题目思路:最小表示法 ...

  4. 获取TXT文件，解决读取TXT乱码问题，查找所输入字是否在TXT文件中，

    /// <summary> /// 查看是否存在 /// </summary> /// <param name="str"></param ...

  5. iOS侧面加shadow

    UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:_bgView.bounds]; _bgView.layer.masksToBo ...

  6. winsxs清理

    win7的网友经常问:C:Windowswinsxs文件夹下是什么文件,可以删除吗? 答案是不建议你删除的,如果你特别想删除的话我推荐你一个工具. 本人亲测系统正常运行. 可以为C盘剩下将近4G空间 ...

  7. 160809、tomcat中配置多个域名及将tomcat配置成系统服务

    本地测试用的(注意红色部分) 第一步.自己的windows电脑,在c盘中有个hosts文件(搜索一下),做以下修改(其中127.0.0.1是本机地址,192.1638.10.139是我虚拟机中linu ...

  8. Linux磁盘管理命令（fdisk，mount，umount，mkfs）

    查看磁盘:fdisk -l 一块磁盘可以分14个分区 [root@wendyhost ~]# fdisk -l Disk /dev/sda: 64.4 GB, 64424509440 bytes 25 ...

  9. vim_action

    读取文件,显示行号 nl -a.txt brace expansion 花括号扩展 echo a{A{1,2},B{3,4}}b mkdir {2009...2011}-0{1...9} {2009. ...

  10. JVM的JIT机制

    因为 JVM 的 JIT 机制的存在,如果某个函数被调用多次之后,JVM 会尝试将其编译成为机器码从而提高执行速度.