请参阅My fiddle

Question

我希望寻呼机隐藏并显示 addClas active
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按钮的单独事件，如下所示：

  $(".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

Answer 2

这应该是简短的并完成你的任务

//first check active to see if you have to hide pager before
if ($('.active').hasClass('list')) $(".pager").hide();

//than bind click
$('.btn').on('click', function () {
    if (!$(this).hasClass("active")) {
        $(".pager").toggle();
        $(".btn").toggleClass('active');
    }
});

<强> DEMO

Answer 3

使用此

 $(".btn").on('click',function(){


        var self = $(this);

        self.addClass("active");
         self.siblings("button").removeClass("active");
        $("div.pager").toggle();

     });

这里是Demo fiddle http://jsfiddle.net/YacE4/18/

Answer 4

最基本且易于理解的答案是：

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

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

请参阅：http://jsfiddle.net/ePnAv/

Answer 5

您可以使用切换类

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

DEMO

如何使用隐藏和显示Jquery

请参阅My fiddle

5 个答案: