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

一、总结

一句话总结：ul>li做选项卡的选项卡头，多个div做选项卡的内容，点到对应的li，就切换到对应的div，用index()获取li索引，与div联系。

1、如何获取一个元素所在父亲中同类孩子的索引？

index()方法

53                 $('#content div').eq($li.index(this)).show().siblings().hide()

2、如何选择除自己之外的所有同级？

没必要用not()方法，用siblings()就足够了，简单好用

52                 $(this).addClass('active').siblings().removeClass('active');

3、除clear:both之外还有什么好方法可以清楚浮动？

设置margin-bottom，因为这样就能保证不在同一行（在多行），float的效果自然影响不到

11         #list{

12             height: 30px;line-height: 30px;

13             margin-bottom: 2px

14         }

二、11-24 jquery如何实现选项卡的制作

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>选项卡3</title>

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

     <style>

         *{margin: 0px;padding: 0px}

         body{padding: 50px}

         ul {list-style-type: none;}

         #list{

             height: 30px;line-height: 30px;

             margin-bottom: 2px

         }

         #list li{

             width: 100px;text-align: center;

             border:1px solid green;

             background: rgba(100,50,20,0.2);

             float:left;

             cursor: pointer;

         }

         #content{

             width: 304px;height: 150px;

             border:1px solid green;border-top: none;

         }

         #content div{display: none;    }

         #content div.show{display: block;}

         #list li.active{

             background: #fff;

             border-bottom: none;

         }

     </style>

 </head>

 <body>

 <div id="tab">

     <ul id="list">

         <li class="active">第一部分</li>

         <li>第二部分</li>

         <li>第三部分</li>

     </ul>

     <div id="content">

         <div class="show">JS进阶......</div>

         <div>JQ精讲......</div>

         <div>JS+JQ+CSS3特效、技巧、案例专题......</div>

     </div>

 </div>

     <script>

         $(function(){

             var $li=$('#list li')

             $li.click(function(){

                 $(this).addClass('active').siblings().removeClass('active');

                 $('#content div').eq($li.index(this)).show().siblings().hide()

             })

         })

     </script>

 </body>

 </html>

 <!--// alert($li.index(this))

  //index()

 返回指定元素相对于其他指定元素的 index 位置

 eq($li.index(this)).css('display','block').siblings().css('display','none')

             // $('#content div').eq($li.index(this)).show().siblings().hide() -->
 

js进阶 11-24 jquery如何实现选项卡的制作的更多相关文章

  1. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  2. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  3. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  8. [js高手之路]jquery插件开发实战-选项卡详解

    在jquery中,插件开发常见的有: 一种是为$函数本身扩展一个方法,这种是静态扩展(也叫类扩展),这种插件一般是工具方法, 还有一种是扩展在原型对象$.fn上面的,开发出来的插件是用在dom元素上面 ...

  9. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

随机推荐

  1. Ubuntu 下安装 Python 虚拟环境

    写在前面: 安装指南是在 Ubuntu 下面操作的.不同的 Linux 版本,安装指令不同.所以,该指南的某些指令对于像 CentOS 等非 Ubuntu 系统不适用. 为什么需要使用虚拟环境? 虚拟 ...

  2. Python学习（三） 八大排序算法的实现（下）

    本文Python实现了插入排序.基数排序.希尔排序.冒泡排序.高速排序.直接选择排序.堆排序.归并排序的后面四种. 上篇:Python学习(三) 八大排序算法的实现(上) 1.高速排序 描写叙述 通过 ...

  3. Aruba 云服务代金券

    Aruba 云服务代金券 Aruba Cloud是欧洲的一家VPS供应商,他家的VPS是基于VMware的,有英国.法国.德国.意大利.捷克5处数据中心,每个月最低1欧元,非欧洲企业客户可以免税 这里 ...

  4. CISP/CISA 每日一题 12

    CISA 每日一题(答) 支付系统模式有哪些: 电子现金模式:支付者不必在线,无条件不可追溯性 电子支票模式:支付者不必在线,涉及个人隐私 电子转帐模式:收款人不必在线 图象处理中,应该有适当的___ ...

  5. 洛谷 P4779【模板】单源最短路径（标准版）

    洛谷 P4779[模板]单源最短路径(标准版) 题目背景 2018 年 7 月 19 日,某位同学在 NOI Day 1 T1 归程 一题里非常熟练地使用了一个广为人知的算法求最短路. 然后呢? 10 ...

  6. 洛谷——P1816 忠诚

    https://www.luogu.org/problem/show?pid=1816#sub 题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记 ...

  7. 洛谷 P1636 Einstein学画画

    P1636 Einstein学画画 题目描述 Einstein学起了画画, 此人比较懒--,他希望用最少的笔画画出一张画... 给定一个无向图,包含n 个顶点(编号1~n),m 条边,求最少用多少笔可 ...

  8. CMake编译Makefile

    以编译Libtif文件为例: 你可以用CMake编译libtiff,超简单,两个步骤. 参考文章 CharlesSimonyi,libtiff库的问题的答复

  9. HDU 4927 Series 1(推理+大数）

    HDU 4927 Series 1 题目链接 题意:给定一个序列,要求不断求差值序列.直到剩一个,输出这个数字 思路:因为有高精度一步.所以要推理一下公式,事实上纸上模拟一下非常easy推出公式就是一 ...

  10. 初识ThreadLocal

    近期公司在进行Java开发者的招聘活动,当中有一道面试题是这种:"请简单描写叙述一下ThreadLocal类的作用." 结果发现有非常多的面试者没有听说过ThreadLocal或者 ...