Bootstrap分页中的禁用链接

Question

我想使用Bootstrap的分页样式。文档说要像这样创建页面列表：

<div class="pagination">
    <ul>
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><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="#">&raquo;</a></li>
    </ul>
</div>

第一个和第二个链接，即左箭头和数字1，应该被禁用。但是当我将其添加到我的Django模板中时，这两个链接仍然可用。单击它们会像任何其他带有ID“＃”的锚点链接一样将用户发送到页面顶部。我认为我仍然需要保留标签以便Bootstrap可以正确地进行样式设置。

有没有办法使得用户点击这些已禁用的“按钮”时不会发生任何事情？

- Ed.

Answer 1

在文档中，那些按钮只是手动禁用的。这与.pagination样式无关。您可以使用它。

$('.pagination .disabled a, .pagination .active a').on('click', function(e) {
    e.preventDefault();
});

注意：如果您使用基于ajax的分页，您必须将此代码片段放在更新处理程序中，或者使用委托事件

- Sherbrow

---

这让我省了很多烦恼。谢谢！ - Mike Furtak

注意：如果您使用基于ajax的分页，您必须将此代码片段放在更新处理程序中。 - Thomas

好的解决方案！如果页面不存在，请不要忘记将链接的 href="" 更改为 #。否则，SEO 爬虫会捕捉到它们，并因此给您负面评分。另外，您可以做的一件事是使上述 JavaScript 更加严格。使用 $('ul.pagination li.disabled a, ul.pagination li.active a').on('click', function (e) { e.preventDefault(); });。所以在类名之前添加 ul 和 li。 - LockTar

这个方法非常有效，其他我查找的结果都失败了！非常感谢。 - Learner Always

Answer 2

如果你服务器端动态生成HTML（例如使用Django），并且不想使用JavaScript，你可以这样做：

pseudo code:
if (Model.HasNext()) {
   <li> // normal link
      <a href="www.someurl.com/page=i">next</a>
   </li>
} else {
   <li class="disabled"> // disabled link
      <a href="javascript: void(0)">next</a>
  </li>
}

- Elger Mensonides

---

谢谢提示，$('a').parent().addClass('disabled'); 也可以正常工作。 - nickel715

Answer 3

作为参考，这是 Bootstrap 所做的事情：

&.disabled,
&[disabled] {
  cursor: not-allowed;
  pointer-events: none; // Future-proof disabling of clicks
  .opacity(.65);
  .box-shadow(none);
}

- Dorian

---

没问题。只需将“btn disabled”类添加到需要禁用的每个链接即可。 - gotqn

Answer 4

$('.disabled a').click(function(){
    return false;
});

- Oleg Polutsiganov

Answer 5

对于 PHPLD v 4.2，我使用以下代码展示 Bootstrap 3 分页。

{* Display Paging Links *}
<ul class="pagination">
<li>{paginate_prev id="MainPaging"}</li>
{paginate_middle id="MainPaging" format="page" prefix="" suffix="" link_prefix="
<li>"link_suffix="</li>" current_page_prefix="
<li class=\"active\"><a href=\"#\">"current_page_suffix="</a></li>"}
<li>{paginate_next id="MainPaging"}</li>
</ul>

- user3241310