zoukankan      html  css  js  c++  java
  • 【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>

  • 相关阅读:
    大道至简 读后感01
    《人月神话》读后感
    水王继续
    软工大作业DB天气项目风险评估
    自我调查 使用输入法
    课堂练习之找“水王”
    浪潮之巅阅读笔记之三
    浪潮之巅阅读笔记之二
    浪潮之巅阅读笔记之一
    课程改进意见
  • 原文地址:https://www.cnblogs.com/zipon/p/4919636.html
Copyright © 2011-2022 走看看