首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何让我的“上一页”和“下一页”按钮在分页上工作?

如何让我的“上一页”和“下一页”按钮在分页上工作?
EN

Stack Overflow用户
提问于 2015-07-18 02:50:46
回答 1查看 28.2K关注 0票数 2

代码语言:javascript
复制
$(document).ready(function(){
      var $pageItem = $(".pagination li")

      $pageItem.click(function(){
        $pageItem.removeClass("active");
        $(this).addClass("active");
      });
    });
代码语言:javascript
复制
<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>

现在,我使用bootstrap分页,并添加一些自定义功能使用jQuery使页面“活动”时,我点击它的意思是当前页面。

但是,“上一步”和“下一步”按钮也将处于“活动”状态。当点击“上一页”或“下一页”按钮时,我应该怎么做才能只切换“活动”页面,而不将“活动”页添加到“上一页”和“下一页”按钮。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-07-18 03:18:46

向“上一步”和“下一步”按钮添加一个类,即在您的案例中列出项目,并使用.not()排除它们。

代码语言:javascript
复制
$(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');
  });


});
代码语言:javascript
复制
<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>

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31482739

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档