概述

原来对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. JVM内存计算问题

    -Xmx10240m:代表最大堆  -Xms10240m:代表最小堆  -Xmn5120m:代表新生代  -XXSurvivorRatio=3:代表Eden:Survivor = 3    根据Gen ...

  2. vue+node+mongoDB 火车票H5（一）---准备工作，基本配置

    前端菜鸟一枚,由于公司项目用到了vue,我虽然参与了,但是很多环境配置和流程还不是特别清楚,就想自己个人业余做个webapp看看, 对于完全新手而言,很多坑会纠结很久,所以想借此机会自己做的同时记录各 ...

  3. Less-css扩展指定多层嵌套选择器样式

    //扩展Extend Use Method:以在study上扩展指定多层嵌套选择器样式 //Share style .test{ font-size:18px; color:#ffffff; ul{ ...

  4. CodeForces 663A Rebus

    A. Rebus time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  5. Exchange 2016 系统要求

    Exchange 2016 和早期版本的 Exchange Server 共存方案 Exchange 2016支持混合部署方案 Exchange 2016 的网络和目录服务器要求 目录服务体系结构: ...

  6. 3 CActiveXUI的一个Bug

    如果主窗口直接用变量生成,则关闭窗口时会产生崩溃            如果用new的方式生成,则不会崩溃,所以给出一个临时的快速解决方案,即主窗口都用new生成,_tWinMain改为下面这样: i ...

  7. 指定文件夹 指定文件后缀名 删除整个文件夹 git 冲突解决 create a new repository on the command line push an existing repository from the command line

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001375840038939c2 ...

  8. SpringMVC 运行流程以及与Spring 整合

    1. 运行流程 2. Spring 和 SpringMVC 整合 // 1. 导入 jar 包 // 2. 配置 web.xml <!-- 配置 Spring 的核心监听器 --> < ...

  9. python列表套字典数据类型转换

    1.题目 list3 = [ {'name':'Alex','hobby':'抽烟'}, {'name':'Alex', 'hobby':'喝酒'}, {'name':'Alex', 'hobby': ...

  10. 微信读书App来了 小伙伴们快去占榜吧

    微信读书App正式上线了,iOS版和Android版同时推出.届时将会出现像微信运动一样的霸榜小伙伴.资料显示,阅文集团成立于2014年1月,是腾讯文学和盛大文学联合成立的新公司.阅文集团成立后,会对 ...