通过jq封装的方法,可以更简单的制作一个选项卡

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script type="text/javascript" src="js/jquery-1.12.4.js"></script>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         #btn ul {

             width: 300px;

             height: 50px;

             margin: 50px;

         }

         .on {

             color: red;

         }

         #btn ul li {

             list-style-type: none;

             width: 50px;

             height: 50px;

             margin-left: 10px;

             background: gray;

             float: left;

             line-height: 50px;

             text-align: center;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div id="btn">

         <ul>

             <li>1</li>

             <li>2</li>

             <li>3</li>

         </ul>

     </div>

     <div>

         <div id="jq1"></div>

         <div class="jq2"></div>

         <div id="jq3"></div>

     </div>

     <script>

         //通过jq来设置三个要div

         $(".jq2")[0].style.width = "100px";

         $(".jq2")[0].style.height = "100px";

         $(".jq2")[0].style.background = "blue";

         $("#jq1")[0].style.width = "100px";

         $("#jq1")[0].style.height = "100px";

         $("#jq1")[0].style.background = "red";

         $("#jq3")[0].style.width = "100px";

         $("#jq3")[0].style.height = "100px";

         $("#jq3")[0].style.background = "green";

         //定义一个变量aLi用于存放btn下面的li,方便使用

         var aLi = $("#btn ul li");

         //通过hide()方法来设置三个div隐藏

         $("div div").hide();

         //点击每一个li触发事件clik()方法，方法自带for循环

         aLi.click(function() {

             //把每个li通过index()方法所带序号存进一个变量中

             var iNum = $(this).index();

             //addClass()方法是增加类名，removeClass()方法是移出类名

             $(this).addClass("on").siblings().removeClass("on");

             //隐藏三个框，通过eq()方法选择显示当前li对应序号的框

             $("div div").hide().eq(iNum).show();

         })

     </script>

 </body>

 </html>

载入外链jq，就可以开始写代码了

JQuery笔记(三)选项卡的更多相关文章

  1. jQuery笔记三——text/html/val/attr/prop

    1.获得内容 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() ...

  2. Python全栈之jQuery笔记

    jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...

  3. JQuery笔记汇总

    jQuery相关资料 官网: jQuery官网 在线API: jQuery在线API W3School:W3School-jQuery教程(中文版哦) 下载jQuery:jQuery各版本下载 jQu ...

  4. jquery封装的选项卡

    ul,li,div{ margin:; padding:;} ul,li{ list-style:none;} .tab_wrap{ width:450px; margin: auto 50px; o ...

  5. jquery插件之选项卡

    jQuery插件编写 首先来一个简拓展jQuery对象的方法 <body > <p>23</p> <script src="js/jquery-1. ...

  6. amazeui学习笔记三（你来我往1）--常见问题FAQs

    amazeui学习笔记三(你来我往1)--常见问题FAQs 一.总结 1.DOM事件失败:记得加上初始化代码,例如 图片轮播 $('#my-slider').flexslider(); 2.jquer ...

  7. js进阶 11-24 jquery如何实现选项卡的制作

    js进阶 11-24 jquery如何实现选项卡的制作 一.总结 一句话总结:ul>li做选项卡的选项卡头,多个div做选项卡的内容,点到对应的li,就切换到对应的div,用index()获取l ...

  8. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  9. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

随机推荐

  1. EasyUI DataGrid及Pagination

    接上一篇EasyUI项目驱动学习 DataGrid数据表格及Pagination分页一起介绍 一.通过<table>标记创建DataGrid,嵌套<th>标签定义列表 < ...

  2. XHtml（Xml+Html）语法知识（DTD、XSD）

    那点你不知道的XHtml(Xml+Html)语法知识(DTD.XSD) 什么是XHtml: 摘录网上的一句话,XHTML就是一个扮演着类似HTML的角色的XML. XHtml可当模板引擎应用: CYQ ...

  3. 在Visual Studio 2012中使用VMSDK开发领域特定语言1

    在Visual Studio 2012中使用VMSDK开发领域特定语言(一)   前言 本专题主要介绍在Visual Studio 2012中使用Visualization & Modelin ...

  4. WEB相关知识和Tomcat服务器

    WEB相关知识 1.Internet上供外界访问的Web资源分为: 静态web资源:指web页面中供人们浏览的数据始终是不变的. 动态web资源:指web页面中供人们浏览的数据是由程序产生的,不同时间 ...

  5. Winform 让跨线程访问变得更简单

    Winform 让跨线程访问变得更简单 前言 由于多线程可能导致对控件访问的不一致,导致出现问题.C#中默认是要线程安全的,即在访问控件时需要首先判断是否跨线程,如果是跨线程的直接访问,在运行时会抛出 ...

  6. WCF服务属性注入基础设施

    WCF服务属性注入基础设施 WCF的服务的创建行为:使用默认构造函数创建WCF服务对象.如果我们想要在WCF内使用外部对象,最简单的方式就是把外部对象做成全局对象.然而这样的话会增加全局对象的数量,让 ...

  7. git的初步使用---本地代码库的使用和提交

    git的初步使用---本地代码库的使用和提交 git是一个好东西,但对于新手来说,这个工具并不好使用,因为它里面涉及到很多东西,而这些东西新手一时间是无法理解的.不幸的是,本人就是新手一枚,所以,这里 ...

  8. 直插式精巧I/O模块：WIZ812MJ数据手册V1.1

    1. 简介 WIZ812MJ是一款内嵌了W5100(硬件TCP/IP芯片,内置PHY).带其他胶合逻辑的MAG-JACK(带变压器的RJ45)网络模块.它可以当作一个组件使用,而且不需要为W5100和 ...

  9. java中的instanceof

    instanceof是Java.php的一个二元操作符(运算符),和==,>,<是同一类东西.由于它是由字母组成的,所以也是Java的保留关键字.它的作用是判断其左边对象是否为其右边类的实 ...

  10. H3 BPM 跨平台表单发起详解

    1.1 目的 为方便技术对接服务,实现流程业务的跨平台对接,给出指引和帮助文档. 2 跨平台以Java为例调用.NET BPM表单流程全过程 2.1 双方系统确定接口协议规则 通信协议:基于soap通 ...