概述

原来对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. ZBarReaderView屏幕旋转问题

    转载:http://42.96.197.72/ios-zbarreaderview-interface-orientation/ 在iPad应用中,如果没有特殊情况,需要让应用支持所有屏幕方向.在iP ...

  2. 细说多线程之Thread VS Runnable

    [线程创建的两种方式] [线程的生命周期] ● 就绪:创建了线程对象后,调用了线程的start(). (注意:此时线程只是进入了线程队列,等待获取CPU服务,具备了运行的条件,但并不一定已经开始运行了 ...

  3. 编写高质量代码–改善python程序的建议（二）

    原文发表在我的博客主页,转载请注明出处! 建议七:利用assert语句来发现问题断言(assert)在很多语言中都存在,它主要为调试程序服务,能够快速方便地检查程序的异常或者发现不恰当的输入等,可防止 ...

  4. python中的json和pickle

    author:headsen chen date::2018-04-10  09:56:54 json模块和pickle模块: 这是用于序列化的两个模块: 概念介绍:json和pickle模块是将数据 ...

  5. 【BZOJ4504】K个串 可持久化线段树+堆

    [BZOJ4504]K个串 Description 兔子们在玩k个串的游戏.首先,它们拿出了一个长度为n的数字序列,选出其中的一个连续子串,然后统计其子串中所有数字之和(注意这里重复出现的数字只被统计 ...

  6. oracle的row_number() OVER (ORDER BY COL2 asc)和row_number() OVER (PARTITION BY COL1 ORDER BY COL2)的用法

    转自:https://jingyan.baidu.com/article/9989c74604a644f648ecfef3.html SELECT ROW_NUMBER() OVER(PARTITIO ...

  7. JDK源码分析之concurrent包（二） -- 线程池ThreadPoolExecutor

    上一篇我们简单描述了Executor框架的结构,本篇正式开始并发包中部分源码的解读. 我们知道,目前主流的商用虚拟机在线程的实现上可能会有所差别.但不管如何实现,在开启和关闭线程时一定会耗费很多CPU ...

  8. Powershell Get Domain Mailbox的几种方法

    一.Disconnected Mailboxes 1.Finding Disconnected Mailboxes The first function is called Get-Disconnec ...

  9. 个人觉得存成char（12），优于varchar(12)

    w 延展一点:0----(还是上边的url),varchar(10)则数据库的存储1-11bytes,而不是0-10bytes;varchar(256)则为2-258bytes; 1----如果待入库 ...

  10. 【python】-- 类的创建、__new__、__metaclass___

    类的创建 前面的随笔都是关于类的知识,通过类创建对象,那这个类到底是怎么产生的呢? 1. 传统创建类 class Foo(object): def __init__(self,name): self. ...