jquery - 如何使用隐藏和显示 Jquery

Question

我想要 pager 隐藏并显示，并且 addClas 处于事件状态
1. pagerBar 隐藏当我点击ListButton并且它事件时。
2.pagerBar当我点击时显示单击gridButton，它是事件
如何使用jquery

<div class="input-group clearfix">
   <button class="btn active list">list</button>
   <button class="btn grid">grid</button>
</div>
<div class="pager"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
<div class="items">
item1 item2 item3 item4
</div>
 <div class="pager clearfix"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span> </div>

CSS

.input-group{
    border:1px solid red;
    text-align:center;
} 
.items{
   height:300px;
   border:1px solid #ddd;
   margin-top:50px;
   font-size:14pt;
   line-height:400px;
   text-align:center;
   color:red;
}

jquery

 $(".btn").on('click',function(){
  // it active and hide and show pager
 });

参见My fiddle

Answer 1

试试这个:

$(".btn").on('click',function(){
  $(".btn").removeClass('active');  
  $(this).addClass('active');  
  if($(this).hasClass('list'))
    $('.pager').hide();
  else
    $('.pager').show();
 });

或者为list和grid按钮绑定(bind)单独的事件，如下所示:

  $(".list").on('click',function(){
      $(".grid").removeClass('active');  
      $(this).addClass('active');  
        $('.pager').hide();
     });

   $(".grid").on('click',function(){
      $(".list").removeClass('active');  
      $(this).addClass('active');  
        $('.pager').show();
     });

<强> Demo