概述

原来对jQuery用的不是很多，主要就是表单验证这些部分，最近想要更深入的学习jQuery和JavaScript编码，就找来了一些视频进行学习，然后就做了这个简单的选项卡示例。视频学习地址见最后。

页面布局

在进行编码之前，最先要做的就是页面布局，开发工具使用的是安装了zenCoding的Notepad++:

布局编码

  1. <body>
  2. <div id="contents">
  3.     <input type="button" class='active' value="唐诗" />
  4.     <input type="button" value="宋词" />
  5.     <input type="button" value="元曲" />
  6.     <div style="display:block">
  7.         <p>
  8.             白日依山尽，<br>
  9.             黄河入海流，<br>
  10.             欲穷千里目，<br>
  11.             更上一层楼。
  12.         </p>
  13.     </div>
  14.     <div>
  15.         <p>
  16.             问君能有几多愁，<br>
  17.             恰似一江春水向东流!
  18.         </p>
  19.     </div>
  20.     <div>
  21.         <p>
  22.             枯藤老树昏鸦，<br>
  23.             小桥流水人家。<br>
  24.             古道西风瘦马，<br>
  25.             断肠人在天涯。
  26.         </p>
  27.     </div>
  28. </div>
  29. </body>

Css演示设置

  1. <style type="text/css">
  2. #contents div{
  3.     height:200px;
  4.     width:200px;
  5.     border:1px #000000 solid;
  6.     display:none;
  7.     position:absolute;
  8. }
  9. .active{
  10.     background-color:red;
  11. }
  12. </style>

jQuery类库的引入

为了方便以后版本的查找，使用的是百度在线的CDN库；

  1. <script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>

动态选项卡的实现

页面布局完成以后，就可以开始动态效果的制作了，下面是代码实现：

  1. <script type="text/javascript">
  2. $(function(){
  3.     $('#contents').find('input').click(function(){
  4.         $('#contents').find('input').attr('class','');
  5.         $(this).attr('class','active');
  6.         $('#contents').find('div').css('display','none');
  7.         $('#contents').find('div').eq($(this).index()).css('display','block');
  8.     });
  9. });
  10. </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. SurvivalShooter学习笔记（五.敌人生命）

    敌人生命系统(受伤 死亡) 敌人生成后有初始生命,被攻击受伤有打击特效,降低生命值,直至死亡: 死亡后怪物:播放死亡音效,动画,然后下沉地表,销毁:玩家:得到相应分数. 敌人生命脚本如下: 1.变量: ...

  2. Django项目实战 - 搜索功能（转）

    首先,前端已实现搜索功能页面, 我们直接写后台逻辑: Q()可以实现 逻辑或的判断,   name_ _ icontains 表示 name字段包含搜索的内容,i表示忽略大小写. from djang ...

  3. Linux严格区分大小写

    虚拟机上安装了MySQL,使用rpm -qa | grep mysql查询时却未找到安装的mysql,后面才发现Linux严格区分大小写,正确的查询命令应该为rpm -qa | grep MySQL, ...

  4. NHibernate 1.0 Released 版本发布了

    NHibernate is a port of Hibernate to the .NET platform. Hibernate is the leading open-source object- ...

  5. 【APIO2014】Palindromes

    #103. [APIO2014]Palindromes 统计 描述 提交 自定义测试 给你一个由小写拉丁字母组成的字符串 ss.我们定义 ss 的一个子串的存在值为这个子串在 ss 中出现的次数乘以这 ...

  6. Flutter入门之有状态组件

    StatefulComponent使用方法入门 在上一篇Flutter入门之无状态组件中我们讲到了无状态组件,所谓的无状态组件指的就是其内部的状态是来自其父组件并使用final类型的变量来存储,当组件 ...

  7. pro_update_role_pwd

    DELIMITER | drop procedure if exists pro_update_role_pwd; CREATE PROCEDURE pro_update_role_pwd ( cro ...

  8. 【转】Mysql的配置文件详解

    [client]port = 3306socket = /tmp/mysql.sock [mysqld]port = 3306socket = /tmp/mysql.sock basedir = /u ...

  9. 怎样优雅的管理ActionBar

    转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/50997095 本文出自:[顾林海的博客] 前言 随着项目越来越大.页面 ...

  10. eslasticsearch操作集锦

    索引-index:一个索引就是一个拥有几分相似特征的文档的集合.比如说,你可以有一个客户数据的索引,另一个产品目录的索引,还有一个订单数据的索引.一个索引由一个名字来标识(必须全部是小写字母的),并且 ...