Bootstrap 分页中的禁用链接答案

【问题标题】：Disabled link in Bootstrap PaginationBootstrap 分页中的禁用链接
【发布时间】：2017-08-02 05:17:21
【问题描述】：

我正在尝试使用 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 正确地设置它的样式。

有没有办法这样写，这样当用户点击一个禁用的“按钮”时它什么都不做？

【问题讨论】：

标签： html twitter-bootstrap anchor

【解决方案1】：

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

你可以用那个

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

注意：如果您使用基于 ajax 的分页，则必须将这段代码放在更新处理程序中或改用 delegated events

【讨论】：

这让我省了很多麻烦。谢谢！
注意：如果您使用基于 ajax 的分页，您必须将这段代码放入更新处理程序中。
很好的解决方案！如果页面不存在，不要忘记将链接的href="" 更改为#。否则 SEO 爬虫会捡起它们，并为此给你负分。您可以做的另一件事是使上述 javascript 更加严格。使用$('ul.pagination li.disabled a, ul.pagination li.active a').on('click', function (e) { e.preventDefault(); });。所以在类之前添加ul 和li。
这就像一个魅力，我查找的所有其他结果都失败了！非常感谢。

【解决方案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>
}

【讨论】：

感谢您的提示，$('a').parent().addClass('disabled'); 也可以正常工作

【解决方案3】：

作为参考，这里是what Bootstrap does：

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

【讨论】：

太完美了。只需将btn disabled 类添加到您需要禁用的每个链接。

【解决方案4】：

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

【讨论】：

【解决方案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>

【讨论】：