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. 【hihocoder 1369】网络流一·Ford-Fulkerson算法

    [Link]:http://hihocoder.com/problemset/problem/1369 [Description] [Solution] 最大流模板题 [NumberOf WA] [R ...

  2. Android自己定义圆角ImageView 支持网络图片

    先看下效果图 我们再来看一张CSDN的圆角图片 从布局能够看出csdn app 的头像也是圆角的Image,但能够看到.有明显的毛刺感.不知道是csdn 程序猿的疏忽还是 我手机的问题,本人手机(小米 ...

  3. XMPP开发之从零開始

    对于server的搭建和设置.我在这里就不再多说了.有好多前辈已经帮大家攻克了.能够參考下这篇博客 XMPPserver配置 我依照这个博客配置好了,server后,然后在网上參照代码写了一个小的de ...

  4. linux下加入用户并赋予root权限

    1.加入用户.首先用adduser命令加入一个普通用户,命令例如以下: #adduser tommy //加入一个名为tommy的用户 #passwd tommy   //改动password Cha ...

  5. [D3JS] Add more map layer and color

    import React, {Component} from 'react'; import * as d3 from 'd3'; import 'd3-geo'; import * as topoj ...

  6. Android 使用Wake Lock

    为了延长电池的使用寿命,Android设备会在一段时间后使屏幕变暗,然后关闭屏幕显示,最后停止CPU.WakeLock是一个电源管理系统服务功能,应用程序可以使用它来控制设备的电源状态. WakeLo ...

  7. ios系统和某些移动端background-attachment:fixed不兼容性

    固定背景不动:background-attachment:fixed; ios系统和某些移动端background-attachment:fixed不兼容性,没有任何效果,但可以hack一下就可以了, ...

  8. DriverModule_01

    最小驱动模块: 最简单的Makefile 无配置文件 最小驱动的四部分 头文件 声明模块信息 模块驱动的入口.出口 功能区 关于这个头文件的分析: linux头文件的位置,例如#include< ...

  9. 【2017中国大学生程序设计竞赛 - 网络选拔赛 && hdu 6154】CaoHaha's staff

    [链接]点击打开链接 [题意] 给你一个面积,让你求围成这个面积最少需要几条边,其中边的连线只能是在坐标轴上边长为1的的线或者是两个边长为1 的线的对角线. [题解] 找规律题 考虑s[i]表示i条边 ...

  10. Mycat 读写分离+分库分表

    上次进过GTID复制的学习记录,已经搭建好了主从复制的服务器,现在利用现有的主从复制环境,加上正在研究的Mycat,实现了主流分布式数据库的测试 Mycat就不用多介绍了,可以实现很多分布式数据库的功 ...