<!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. MYSQL 写入emoji表情字符处理

    这个鬼emoji表情是4个字节,mysql使用的utf8编码,UTF8占3个字节,要存储那个emoji表情需要将mysql编码由UFT8改为UFT8的超集,utf8mb4; 改数据库编码容易引起大面的 ...

  2. WebStorm 配置less

    1.打开Webstorm的Setting 搜索,watch 找到 File watch,点击右侧加号添加Less. 2.配置, working directory. Output paths

  3. 一个具体的例子学习Java volatile关键字

    相信大多数Java程序员都学习过volatile这个关键字的用法.百度百科上对volatile的定义: volatile是一个类型修饰符(type specifier),被设计用来修饰被不同线程访问和 ...

  4. Java poi 的使用

    poi可操作老旧版本的excel 下载jar包,http://archive.apache.org/dist/poi/release/bin/poi-bin-3.17-20170915.tar.gz ...

  5. readystatechange

    // alternative to DOMContentLoaded document.onreadystatechange = function () { if (document.readySta ...

  6. k sum(lintcode)

    没通过的代码: class Solution { public: /* * @param A: An integer array * @param k: A positive integer (k & ...

  7. sql server 处理分母为空

    SP 前面加下面设置,会忽略错误结果 直接返回null 不会导致SP 失败 SET ANSI_WARNINGS OFFSET ARITHABORT OFFSET ARITHIGNORE ON

  8. Encryption-基础：base64加解密

    环境:vc2003 .h /********** This library is free software; you can redistribute it and/or modify it und ...

  9. python Object-Oriented Programming

    Python 类的成员.成员修饰符.类的特殊成员. Python 类的成员 类的成员可以分为三大类: 字段.方法和属性. #注:所有成员中,只有普通字段的内容保存对象中,即: #根据此类创建了多少对象 ...

  10. Java多线程大合集

    1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速.比如,如果一个线程完成 ...