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

最新推荐文章于 2025-07-22 17:10:16 发布

weixin_33901926

最新推荐文章于 2025-07-22 17:10:16 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangqigao/articles/8377287.html

一、前言

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

二、操作的html

<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事件

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

3.2、添加样式

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

3.3、其他筛选器

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

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

四、 Tab菜单示例实现

4.1、第一种方式

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

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

4.2、第二种方式

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

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

转载于:https://www.cnblogs.com/zhangqigao/articles/8377287.html