<!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同胞遍历】的更多相关文章

  1. jq的遍历节点

    1.child()方法 该方法用于取得匹配元素的子元素集合 2.next() 该方法用于取得匹配元素后面紧邻的同辈元素, 3.prev() 该方法用于取得匹配元素前面紧邻的同辈元素 4.sibling ...

  2. jq的遍历关系元素方法集合

    children .children(selector) 返回被选元素的所有直接子元素,不返回文本节点: 下面例子:给level-2的子元素设置border.比较使用children和find htm ...

  3. jq each遍历数组或对象

    var arr = ["北京","上海","天津","重庆","河北","河南" ...

  4. 【jQuery】 JQ和HTML以及JQ遍历元素

    JQ & HTML JQ作为一个JS库,很好地继承了JS和HTML互动的特点,并且还给出了包装得更好,操作层次更高的方法.和之前JQ的内容一样,方法的表现形式是$(selector).acti ...

  5. jQuary学习の四の遍历

    向上遍历DOM树: parent():返回被选元素的直接父元素 parents():返回被选元素的所有祖先元素(当后边参数存在时则表示其中与参数相同的祖先元素) parentsUntil()返回介于两 ...

  6. jQuery学习(六)——使用JQ完成省市二级联动

    1.JQ的遍历操作 方式一: 1 $(function(){ //全选/全不选 $("#checkallbox").click(function(){ var isChecked= ...

  7. jQuery动画和遍历

    一.动画 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数: 1. speed:动画的速度.三个预定义的值( ...

  8. jQuery关于隐式迭代的个人理解~

    1.JQuery对象" 如: $('div').text("div展示的信息") 可以看成"是一个包含一个dom数组 和 包含所有Jquery方法的容器 2.每 ...

  9. jquery------隐式迭代

    其中Jq方法遍历内部dom数组的过程就叫做[隐式迭代] my.js $(document).ready(function(){ (function($){ $.fn.swapClass=functio ...

随机推荐

  1. decompressedResponseImageOfSize:completionHandler:]_block_invoke

    原因:   It turns out the linker error was caused by the CGImageSourceCreateWithData call. And the root ...

  2. Gym 100342I Travel Agency （Tarjan）

    题意读懂了就好做了,就是求一下点双连通分量.维护一下一颗子树的结点数,对于一个结点当u是割点的时候, 统计一下u分割的连通分量v,每得到一个连通分量的结点数cnt(v)和之前连通分量结点数sum相乘一 ...

  3. iOS的设计备忘录/资源集合（新手快速开发）

    iOS的设计备忘录 随着iOS7更新,风格走上扁平化,大部分iOS设计师及程序员都需要对自己的软件做相关调整,尺寸.Icon.UI等等,我在这里总结一下相关资料,以及提供一些关于iOS7设计素材. 一 ...

  4. SpringAOP 设计原理

    1.  设计原理 引入了,代理模式. java 程序执行流: 如果从虚拟机的角度看,整个程序的过程就是方法的调用,我们按照方法的执行顺序,将方法调用成一串. 在方法之间有着Join Point 连接点 ...

  5. ucosii（2.89）mbox 应用要点

    OSMboxCreate(void *msg)     当创建一个mbox时候,消息邮箱允许(任务或者中断)向其他一个或者几个任务发送消息.初始化msg指向消息邮箱中的消息. void*OSMboxP ...

  6. Asp.Net Core 入门（五）—— 布局视图_Layout.cshtml

    布局视图和我们在Asp.Net MVC一样,布局视图_Layout.cshtml使得所有视图保持一致的外观变得更加容易,因为我们只有一个要修改的布局视图文件,更改后将立即反映在整个应用程序的所有视图中 ...

  7. Javascript根据指定下标或对象删除数组元素

    删除数组元素在工作中经常会用到,本文讲解一下Javascript根据下标删除数组元素的方法,需要了解的朋友可以参考下 将一下代码放在全局js文件中: Js代码 /** *删除数组指定下标或指定对象 * ...

  8. BestCoder Round#15 1002-Instruction

    http://acm.hdu.edu.cn/showproblem.php?pid=5083 官方题解——> 1002 Instruction 先考虑编码,首先找到operation对应的编码, ...

  9. No-11.变量进阶

    变量进阶 目标 变量的引用 可变和不可变类型 局部变量和全局变量 01. 变量的引用 变量 和 数据 都是保存在 内存 中的 在 Python 中 函数 的 参数传递 以及 返回值 都是靠 引用 传递 ...

  10. [HDU5360]:Gorgeous Sequence（小清新线段树）

    题目传送门 题目描述: (原题英文) 操作0:输入l,r,t,线段树区间与t取min. 操作1:输入l,r,区间取最大值. 操作2:输入l,r,区间求和. 输入格式: 第一行一个整数T,表示数据组数: ...