一、前言
之前我们学习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");})
