通过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. npm 安装与常用命令

    下载nodejs并安装,会附带安装npm工具https://nodejs.org/en/download/ npm 常用命令#在执行命令时需要管理员权限,mac请用sudo来执行,windows请使用 ...

  2. SOA体系结构基础培训教程

    SOA体系结构基础培训教程-规范标准篇 引子:本文是<SOA体系结构基础培训教程>第3章<SOA标准与规范>课件,版权所有,转载请注明出处. 随着SOA在业界的应用日益广泛,S ...

  3. Java笔记：抽象类、接口

    这篇笔记主要是抽象类和接口,还有简单介绍下三种设计模式:模板模式.工厂模式.命令模式 1.抽象方法和抽象类(1)抽象方法和抽象类都必须使用abstract修饰符来定义,包含抽象方法的类只能被定义成抽象 ...

  4. spring和redis的整合

    spring和redis的整合-超越昨天的自己系列(7) 超越昨天的自己系列(7) 扯淡:  最近一直在慢慢多学习各个组件,自己搭建出一些想法.是一个涉猎的过程,慢慢意识到知识是可以融汇贯通,举一反三 ...

  5. TOGAF架构开发方法（ADM）之架构变更管理阶段

    TOGAF架构开发方法(ADM)之架构变更管理阶段 1.10 架构变更管理(Architecture Change Management) 企业架构开发方法各阶段——架构变更管理 1.10.1 目标 ...

  6. 自制AutoMapper实现DTO到持久层Entity的转换

    自制AutoMapper实现DTO到持久层Entity的转换 项目中经常涉及到页面DTO更新,保存到数据库的操作,这就必然牵扯到DTO和持久层对象的转换,常见的第三方库有: java:dozer .n ...

  7. Java中数组Arrays.binarySearch，快速查找数组内元素位置

    在数组中查找一个元素,Arrays提供了一个方便查询的方法.Arrays.binarySearch(): 测试列子: public class MainTestArray { public stati ...

  8. 使用HttpWebRequest模拟登陆阿里巴巴(alibaba、httpwebrequest、login)

    前言 其实老喜欢取经,偶尔也得分享下.关于阿里巴巴国际站的登陆,过程有点复杂但是算不上难.一不小心少个东西倒也挺麻烦的. 主要是看下请求类HttpClient基本请求封装使用,AliClient模拟浏 ...

  9. C语言之位运算

    位运算 1).定义. 指的是1个二进制数据的每一位来参与运算. 位运算的前提: 是这个数必须是1个二进制. 注意: a). 参与位运算的二进制数据必须是补码形式. b). 位运算的结果也是二进制的补码 ...

  10. C语言之分支结构 if(二)

    If的第三种和第四种形式(tips:也是比较常用的形式) 3).if语句第三种形式: 简单来说就是任意的if或者else里面还可以嵌套任意的if-else语句 语法: if(表达式){ if(表达式2 ...