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. tree ---树状显示

    tree命令以树状图列出目录的内容. 语法 tree(选项)(参数) 选项 -a:显示所有文件和目录: -A:使用ASNI绘图字符显示树状图而非以ASCII字符组合: -C:在文件和目录清单加上色彩, ...

  2. terminfo 数据库?

    什么是 terminfo 数据库? UNIX 系统上的 terminfo 数据库用于定义终端和打印机的属性及功能,包括各设备(例如,终端和打印机)的行数和列数以及要发送至该设备的文本的属性.UNIX ...

  3. at&&atq&&atrm---定时任务

    at放在 ls /var/spool/at/ 目录下 At的配置文件/etc/at.deny和/etc/at.allow 如果deny单独存在,则是deny以为的所有用户都可以使用at命令 如果all ...

  4. linux系统常用日志

    系统日志记录着系统运行中的记录信息,在服务或者系统发生故障的时候,通过查询系统日志,可以帮助我们诊断.系统日志可以预警安全问题,系统日志一般都存放在/var/log目录下 /var/log/dmesg ...

  5. WPF通用框架 数据库结构

    前言 由於技術轉型, 目前大部分工作都是WPF為主, 但是趨於如今想在網絡上找一套能夠滿意的WPF權限管理框架太難, 因為WinForm那時候是有一套改寫過的權限框架, 所以數據庫設計這塊已經有了一個 ...

  6. 阿里云 CentOS7.4 环境安装mysql5.7

    1. 删除默认安装的数据库,无所谓的请略过 据说CentOS7.x版本会默认安装mariadb数据库,我有点强迫症,故卸载之: rpm -qa|grep mariadb yum remove mari ...

  7. Day5上午解题报告

    预计分数:100+40+30=170 实际假分数:0+0+0=0 CE*3 实际真分数:60+50+0=110 老师没把我的程序放的文件夹里面,于是..... T1 https://www.luogu ...

  8. Android NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件

    NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只 ...

  9. golang 函数作为类型

    golang 函数作为类型 package main import "fmt" type A func(int, int) func (f A)Serve() { fmt.Prin ...

  10. Linux shell command学习笔记(二)

    <cut> 作用:从输入文件或者命令的输出中析取出各种域 用法:cut –c{字符串范围} –d{字段间分割符} –f{字段索引编号} 举例: (1)查看在线用户:who | cut –c ...