概述

原来对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. Android 实现个性的ViewPager切换动画 实战PageTransformer（兼容Android3.0下面）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40411921.本文出自:[张鸿洋的博客] 1.概述 之前写过一篇博文:Andro ...

  2. Android无线测试之—UiAutomator UiCollection API介绍

    UiCollection类介绍 一.UiCollection类说明 1)UiCollection类是UiObject类的子类,即UiObject类的所有方法都被UiCollection继承下来了,都可 ...

  3. 使用sendmail来发邮件

    安装sendEmail sendEmail是一个免费.轻量级.命令行的SMTP邮件客户端. 如果你需要使用命令行方式发送邮件,那么sendEmail是非常完美的选择:使用简单.功能强大. wget - ...

  4. grunt 相关知识

    /** * Created by lee on 2014.07.02 002. */ module.exports = function (grunt) { // 项目配置 grunt.initCon ...

  5. html+css写出类似word目录样式的内容

    word目录的格式里这种很常见,要用html+css写出来刚开始还有点懵. 左右两边都是内容撑开宽度,中间内容的宽度也不是确定的,也是随着左右两边的内容动态变化的. 最终解决思路是,给右边内容加上白色 ...

  6. 170223、Tomcat部署时war和war exploded区别以及平时踩得坑

    war和war exploded的区别 在使用IDEA开发项目的时候,部署Tomcat的时候通常会出现下边的情况: 是选择war还是war exploded 这里首先看一下他们两个的区别: war模式 ...

  7. Android Log工具之Luffy

    Luffy Luffy可以在手机端实时显示你App中的logcat输出.并且具有Log等级与Tag过滤功能.另外Luffy还支持收集Log,保存Log和查看本地log功能. 使用方法 1.Gradle ...

  8. 巨蟒python全栈开发-第8天 文件操作

    一.文件操作 今日大纲: 1.文件操作->open() open 打开 f=open(文件路径,mode='模式',encoding='编码格式') #python最最底层操作的就是bytes ...

  9. gunicorn

    https://blog.csdn.net/jailman/article/details/78496522 gunicorn工作原理 Gunicorn“绿色独角兽”是一个被广泛使用的高性能的Pyth ...

  10. MyBatis 映射文件详解

    1. MyBatis 映射文件之<select>标签 <select>用来定义查询操作; "id": 唯一标识符,需要和接口中的方法名一致; paramet ...