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. matplotlib散点图笔记

    定义: 由一组不连续的点完成的图形 散点图: 包含正相关性,负相关性和不相关性. 散点图生成函数: plt.scatter(x,y) 演示代码如下: import numpy as np import ...

  2. 洛谷 P1358 扑克牌

    P1358 扑克牌 题目描述 组合数学是数学的重要组成部分,是一门研究离散对象的科学,它主要研究满足一定条件的组态(也称组合模型)的存在.计数以及构造等方面的问题.组合数学的主要内容有组合计数.组合设 ...

  3. x264代码剖析（八）：encode()函数之x264_encoder_close()函数

    x264代码剖析(八):encode()函数之x264_encoder_close()函数 encode()函数是x264的主干函数.主要包含x264_encoder_open()函数.x264_en ...

  4. 安卓使用WebView下载文件，安卓实现软件升级功能

    由于调用系统默认浏览器下载更新,造成用户体验非常不好,所以决定在webview中直接下载系统更新.然后直接安装. 由于要下载,所以必须用webview,联网权限这里不说了,直接写在manifafest ...

  5. C语言之文件操作06——写数据到文本文件遇0停止

    //文件 /* =============================================================== 题目:输入10个篮球运动员的身高数据(cm)保存至D盘文 ...

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

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

  7. OrmLite使用小结（一）

    在使用OrmLite过程中,遇到了不少问题.鉴于中文文档比較少,看英文文档又不知道怎样看起.仅仅能遇到问题查找解决方法并整理出来,如有错误,希望能指正! ** 1.模糊条件查询 ** 使用条件查询时. ...

  8. WebSocket兼容到低版本浏览器

    就目前而言,WebSocket是最好的Web通信解决方案了.但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案.于是我模拟We ...

  9. js无缝滚动原理及详解[转自刹那芳华]

    刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...

  10. Thinkphp5创建控制器

    今天我们就来创建一个控制器: <?php namespace app\index\controller; use think\Controller; class Test extends Con ...