day16-筛选器以及Tab菜单示例

一、前言

　　之前我们学习dom写Tab菜单示例，今天我们来学习一下常用的筛选器和Tab菜单示例。

二、操作的html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: black;
            color: white;
            cursor: auto;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
 
<body>
   <div style="height: 400px;width: 200px;border: 1px solid #dddddd">
       <div class="item">
           <div class="header">标题一</div>
           <div id="i1" class="content">内容</div>
       </div>
       <div class="item">
           <div class="header">标题二</div>
           <div class="content hide">内容</div>
       </div>
       <div class="item">
           <div class="header">标题三</div>
           <div class="content hide">内容</div>
       </div>
   </div>
 
    <script src="jquery-1.12.4.js"></script>
</body>

三、简单筛选器

3.1、绑定onclick事件

描述：选中.header标签，全部绑定onclick事件

1
2
3
$(".header").click(function(){
            //js代码
}

3.2、添加样式

1
2
$("#i1").addClass("hide")  //添加hide样式，如果存在就不添加
$("#i1").removeClass("hide")  //删除hide样式

3.3、其他筛选器

说明:以下筛选器中都可以传入参数，比如：$(this).children("#i1")，在的孩子标签里面找id=i1的标签。

1
2
3
4
5
6
$(this).next()   //当前的标签的下一个标签
$(this).prev()   //当前的标签的上一个标签
$(this).parent()  //当前标签的父标签
$(this).children()  //当前标签的所有子标签
$(this).siblings()  //获取兄弟标签
$(this).parent().siblings().find(".content") //查找.content标签

四、 Tab菜单示例实现

4.1、第一种方式

说明：这个是分开的，不是写的一行。

1
2
3
4
$(".header").click(function(){
            $(this).next().removeClass("hide");
            $(this).parent().siblings().find(".content").addClass("hide");
        })

4.2、第二种方式

说明：完全是可以写成一行的。

1
2
3
$(".header").click(function(){      
          $(this).next().removeClass("hide").parent().siblings().find(".content").addClass("hide");
        }) 
posted @ 2018-05-23 14:33  东郭仔  阅读(123)  评论(0)    收藏  举报