如何禁用Bootstrap分页链接?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (52)

我正在尝试使用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才能正确设置它。

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

提问于
用户回答回答于

在文档中,这些按钮只是手动禁用。

你可以使用它:

$('.pagination .disabled a, .pagination .active a').on('click', function(e) {
    e.preventDefault();
});
用户回答回答于

如果你动态地写服务器端的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>
}

扫码关注云+社区

领取腾讯云代金券