Bootstrap分页中的已禁用链接

Question

我正在尝试使用Bootstrap的Pagination风格.文档说要创建页面列表,如下所示:

<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正确地设计它.

有没有办法写这个,以便当用户点击其中一个禁用的"按钮"时它没有做任何事情？

Answer 1

在文档中,这些按钮只是手动禁用.它与.pagination造型无关.

你可以用它

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

注意:如果您使用基于ajax的分页,则必须将此代码放在更新处理程序中或使用委派事件代替

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>
}

Answer 3

作为参考，这是Bootstrap的作用：

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