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. 今日题解------uvalive 2689

    今天学到了代码以外的东西,就是你在vj上挂了content ,然后你想更新它,你就要刷新一下,不然你提交的那题可能提交到别的地方. 好了回到重点,本题的题意是: #include<bits/st ...

  2. 【习题 8-6 UVA - 1611】 Crane

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 想把数字i从位置j移动到位置i 可以这样. 假设mov(x,y)表示将(x..x+len/2-1)和(x+len/2..y)交换. ...

  3. [置顶] Docker学习总结（2）——Docker实战之入门以及Dockerfile（二）

    csphere/php-fpm:5.4 # cd docker-training/php-fpm/ # ls Dockerfile nginx_nginx.conf supervisor_nginx. ...

  4. GestureDetector- 滑屏手势方式实现

    今天做的项目中,需要使用滑屏来调出一个界面,经过自己的尝试,结合网上的方法,成功实现了. 代码如下 package com.example.text; import android.app.Activ ...

  5. 3.JPA开发

    转自:https://blog.csdn.net/aspnetandjava/article/details/7034779 1. 什么是JPA 1. JPA(Java Persistence API ...

  6. SQL数值转字符串保留指定小数位

    IF EXISTS ( SELECT * FROM sysobjects WHERE xtype = 'fn' AND name = 'fn_NumberFormat' ) BEGIN DROP FU ...

  7. Maven学习笔记4

    POM解析pom描述自身坐标,以及它关联的依赖,插件,仓库等. 项目模块设计项目聚合和继承. pom标签解析1. pom标签解析2. pom标签解析3. pom标签解析4. 聚合和继承 聚合模块只保留 ...

  8. codeforces 204E. Little Elephant and Strings(广义后缀自动机，Parent树)

    传送门在这里. 大意: 给一堆字符串,询问每个字符串有多少子串在所有字符串中出现K次以上. 解题思路: 这种子串问题一定要见后缀自动机Parent树Dfs序统计出现次数都是套路了吧. 这道题统计子串个 ...

  9. [MySQL 5.1 体验]MySQL 实例管理器 mysqlmanager 初试

    原贴:http://imysql.cn/node/313 [MySQL 5.1 体验]MySQL 实例管理器 mysqlmanager 初试 周二, 2007/06/19 - 22:10 - yejr ...

  10. [Node] Stateful Session Management for login, logout and signup

    Stateful session management: Store session which associate with user, and store in the menory on ser ...