一、前言

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

二、操作的html

    
                
     
       
      
           
       
        标题一
       
           
       
        内容
       
       
      
       
      
           
       
        标题二
       
           
       
        内容
       
       
      
       
      
           
       
        标题三
       
           
       
        内容
       
       
      
   
     
    

三、简单筛选器

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");        })