【JQ同胞遍历】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab选项卡</title>
<style type="text/css">
*{ margin:0 ; padding:0;}
li { list-style-type:none;}
.tab { margin-bottom:30px;}
.tab .title li { cursor:pointer; height:30px; line-height:30px; background:#ccc; float:left; margin-right:5px; padding:0 10px;}
.tab .title li.on { background:#0C0; color:#000;}
.tab .icontent { display:none;}
.tab .content { border:1px solid #ccc; min-height:60px; clear:both;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body style="padding-left:100px;">
<p style="margin:30px 0 30px 0;">Tab选项卡</p>
<div class="tab">
<ul class="title">
<li class="on">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<div class="content">
<div class="icontent" style="display:block">
内容一
</div>
<div class="icontent">
内容二
</div>
<div class="icontent">
内容三
</div>
</div>
</div>
<div class="tab">
<ul class="title">
<li class="on">选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
<div class="content">
<div class="icontent" style="display:block">
内容1
</div>
<div class="icontent">
内容2
</div>
<div class="icontent">
内容3
</div>
</div>
</div>
<div class="tab" id="hover">
<ul class="title">
<li class="on">选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
<div class="content">
<div class="icontent" style="display:block">
内容1
</div>
<div class="icontent">
内容2
</div>
<div class="icontent">
内容3
</div>
</div>
</div>
<script type="text/javascript">
function tab(nav,type){
var $nav = $(nav);
var $title = $(".title", $nav);
$title.find("li").bind(type,function(){
$this = $(this);
var index = $this.prevAll().length; //通过往上同胞元素的个数来确定自己当前的索引。。。机智 ps：preAll()往上遍历所有同胞元素 prev往上遍历第一个
$this.siblings("li").removeClass("on").end().addClass("on"); // ps：siblings 遍历所有的同胞元素
$this.parent().next(".content").find(".icontent").hide().eq(index).show(); // ps：next往下遍历第一个同胞元素
})
}
//
tab(".tab","click");
tab("#hover","mouseover")
</script>
</body>
</html>
【JQ同胞遍历】的更多相关文章
- jq的遍历节点
1.child()方法 该方法用于取得匹配元素的子元素集合 2.next() 该方法用于取得匹配元素后面紧邻的同辈元素, 3.prev() 该方法用于取得匹配元素前面紧邻的同辈元素 4.sibling ...
- jq的遍历关系元素方法集合
children .children(selector) 返回被选元素的所有直接子元素,不返回文本节点: 下面例子:给level-2的子元素设置border.比较使用children和find htm ...
- jq each遍历数组或对象
var arr = ["北京","上海","天津","重庆","河北","河南" ...
- 【jQuery】 JQ和HTML以及JQ遍历元素
JQ & HTML JQ作为一个JS库,很好地继承了JS和HTML互动的特点,并且还给出了包装得更好,操作层次更高的方法.和之前JQ的内容一样,方法的表现形式是$(selector).acti ...
- jQuary学习の四の遍历
向上遍历DOM树: parent():返回被选元素的直接父元素 parents():返回被选元素的所有祖先元素(当后边参数存在时则表示其中与参数相同的祖先元素) parentsUntil()返回介于两 ...
- jQuery学习(六)——使用JQ完成省市二级联动
1.JQ的遍历操作 方式一: 1 $(function(){ //全选/全不选 $("#checkallbox").click(function(){ var isChecked= ...
- jQuery动画和遍历
一.动画 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数: 1. speed:动画的速度.三个预定义的值( ...
- jQuery关于隐式迭代的个人理解~
1.JQuery对象" 如: $('div').text("div展示的信息") 可以看成"是一个包含一个dom数组 和 包含所有Jquery方法的容器 2.每 ...
- jquery------隐式迭代
其中Jq方法遍历内部dom数组的过程就叫做[隐式迭代] my.js $(document).ready(function(){ (function($){ $.fn.swapClass=functio ...
随机推荐
- （八）mybatis之映射器
映射器 映射器是由Java接口和XML文件(或注解)共同组成的,作用如下: ① 定义参数类型. ② 描述缓存. ③ 描述SQL语句. ④ 定义查询结果和POJO的映射关系. 以下用两种 ...
- ndarray数组自动创建
为了实现某些运算,需要快速构造符合要求的大数组 Numpy函数生成的数组,如不指定类类型,几乎全为浮点型(arange除外,它是整形),因为科学计算中测量值,例如温度.长度,都是浮点数 import ...
- vue 数组更新 this.$set(this.dataList, data.index, data.data)
vue 数组更新 this.$set(this.dataList, data.index, data.data) https://www.cnblogs.com/huangenai/p/9836811 ...
- python基础一 day13 复习
# 函数 —— 2天 # 函数的定义和调用 # def 函数名(形参): #函数体 #return 返回值 #调用 函数名(实参) # 站在形参的角度上 : 位置参数,*args,默认参数(陷阱),* ...
- shelll脚本，常见的脚本题目。
[root@localhost wyb]# cat 2quan.sh #!/bin/bash #写一个脚本,先要求输入用户名,然后让他输入一个数字,输的如果是数字给输出yes,不是数字,输出no #然 ...
- 【最长连续零 线段树】bzoj1593: [Usaco2008 Feb]Hotel 旅馆
最长连续零的线段树解法 Description 奶牛们最近的旅游计划,是到苏必利尔湖畔,享受那里的湖光山色,以及明媚的阳光.作为整个旅游的策划者和负 责人,贝茜选择在湖边的一家著名的旅馆住宿.这个巨大 ...
- 【线段树 集合hash】bzoj4373: 算术天才⑨与等差数列
hash大法好(@ARZhu):大数相乘及时取模真的是件麻烦事情 Description 算术天才⑨非常喜欢和等差数列玩耍.有一天,他给了你一个长度为n的序列,其中第i个数为a[i].他想考考你,每次 ...
- 【图论 动态规划拆点】luoguP3953 逛公园
经典的动态规划拆点问题. 题目描述 策策同学特别喜欢逛公园.公园可以看成一张 NN 个点 MM 条边构成的有向图,且没有 自环和重边.其中1号点是公园的入口, NN 号点是公园的出口,每条边有一个非负 ...
- 常用c++函数
strrev(str) (str为字符串)倒序输出字符串 floor(x),有时候也写做Floor(x),其功能是“向下取整”,或者说“向下舍入”,即取不大于x的最大整数(与“四舍五入”不同,下取整 ...
- Hive和Hbase整合
Hive只支持insert和delete操作,并不支持update操作,所以无法实施更新hive里的数据,而HBASE正好弥补了这一点,所以在某些场景下需要将hive和hbase整合起来一起使用. 整 ...