如何让我的“prev”和“下一个”按钮工作分页？

问题描述

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css =stylesheet/>< nav> < ul class =pagination> <李> < a href =＃aria-label =上一个> < span aria-hidden =true>& laquo;< / span> < / A> < /锂> < li>< a href =＃> 1< / a>< / li> < li>< a href =＃> 2< / a>< / li> < li>< a href =＃> 3< / a>< / li> < li>< a href =＃> 4< / a>< / li> < li>< a href =＃> 5< / a>< / li> <李> < a href =＃aria-label =下一个> < span aria-hidden =true>& raquo;< / span> < / A> < /锂> < / nav>  

我使用bootstrap分页，并添加一些自定义功能，使用jQuery使页面活跃，当我点击它意味着当前页面。

然而，prev和下一步按钮也将激活。
当我点击prev或next按钮，而不是将active添加到prev和next按钮时，我可以做些什么来只切换页面active。

解决方案向前一个和下一个按钮添加一个类，即您的案例中的列表项，并使用 .not（）

$（document）.ready（function（）{var pageItem = $（。pagination li）。 not（。prev，.next）; var prev = $（。pagination li.prev）; var next = $（。pagination li.next）; pageItem.click（function（）{pageItem.removeClass （active）; $（this）.not（.prev，.next）.addClass（active）;}）; next.click（function（）{$（'li.active'）。removeClass （'active'）。next（）。addClass（'active'）;}）; prev.click（function（）{$（'li.active'）。removeClass（'active'）。prev（）。addClass（ 'active'）;}）;}）;

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js >< / script>< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.cssrel =stylesheet/>< nav> < ul class =pagination> < li class =prev> < a href =＃aria-label =上一个> < span aria-hidden =true>& laquo;< / span> < / A> < /锂> < li>< a href =＃> 1< / a> < /锂> < li>< a href =＃> 2< / a> < /锂> < li>< a href =＃> 3< / a> < /锂> < li>< a href =＃> 4< / a> < /锂> < li>< a href =＃> 5< / a> < /锂> < li class =next> < a href =＃aria-label =下一个> < span aria-hidden =true>& raquo;< / span> < / A> < /锂> < / nav>  

$(document).ready(function(){
      var $pageItem = $(".pagination li")

      $pageItem.click(function(){
        $pageItem.removeClass("active");
        $(this).addClass("active");
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Now, I am using bootstrap pagination and add some customise feature using jQuery to make page "active" when I click on it which mean current page.

However, the "prev" and "next" button will be also "active".What can I do to only switch page "active" when click on "prev" or "next" button and not to add "active" to "prev" and "next" button.

解决方案

Add a class to the previous and next buttons i.e. list items in your case and use .not() to exclude them.

$(document).ready(function() {
  var pageItem = $(".pagination li").not(".prev,.next");
  var prev = $(".pagination li.prev");
  var next = $(".pagination li.next");

  pageItem.click(function() {
    pageItem.removeClass("active");
    $(this).not(".prev,.next").addClass("active");
  });

  next.click(function() {
    $('li.active').removeClass('active').next().addClass('active');
  });

  prev.click(function() {
    $('li.active').removeClass('active').prev().addClass('active');
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav>
  <ul class="pagination">
    <li class="prev">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a>
    </li>
    <li><a href="#">2</a>
    </li>
    <li><a href="#">3</a>
    </li>
    <li><a href="#">4</a>
    </li>
    <li><a href="#">5</a>
    </li>
    <li class="next">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

这篇关于如何让我的“prev”和“下一个”按钮工作分页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！