关于分页标签，上一页和下一页不可点击。_网页下一页按钮没反应-优快云博客

本文介绍了如何在不同浏览器上解决分页按钮在第一页时仍可点击的问题。使用JavaScript和CSS3实现了按钮的禁用状态，并确保了在Chrome和Firefox上的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天遇到了分页问题。

在第一页的时候，上一页依然是一个可点击的状态。

于是开始想解决办法

页面中，上下页都套用了bootstrap中分页的“disabled” 的class，这个class具体为一个小小的禁止标志。翻页的时候，在页面中间时，上一页和下一页的disabled是取不到的，在首尾页，则取到disabled。

大体思路如下：

在ul里面设置一个id，通过js加载页面时候取得上下页面的class值，当class=disabled时，标签页为不可点击状态。

<script>
  $(function () {
    var className = $("#lastPageLi").attr('class');
    if (className == 'disabled') {
      $("#lastPage").attr("href","javascript:false")
    });
</script>

通过把href地址替换为JavaScript：false，来实现不可点击，此时禁止标志还在，也是不可点击的状态。

今天在调试浏览器的时候发现，上面的代码，在chrome上可以很好的运行，但在ff上，ff会跳出一个新的页面同时页面里显示文字“false”

扎心了老铁，只能换种方法。

查阅到css3有个属性为

.click-false{
  pointer-events:none
}

意思就是鼠标点击失效的意思吧。

那么思路来了。

$(function () {
  var className = $("#lastPageLi").attr('class');
  if (className == 'disabled') {
    $("#lastpage").addClass("click-false")
  }
});

代码的前半段部分还是不变的，获取class的值，当class的值等于disabled的时候，在ul上动态增加一个名为click-false的样式，使得鼠标点击失效。

在chrome和ff上都兼容运行。

但还有一个问题，在插入class的时候，click-false把原先的disabled给覆盖了，也就是说禁止的小图标消失。

先记着。