禁用Bootstrap分页链接 [英] Disabled link in Bootstrap Pagination

问题描述

我正在尝试使用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 样式无关。

您可以使用它
'b $ b

$（'。pagination .disabled a，.pagination .active a'）。on（'click'，function（e ）{
e.preventDefault（）;
}）;


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

I'm trying to use Bootstrap's Pagination style. The documentation says to create the page list like so:

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

The first two links, the left arrow and the 1, should be disabled. When I incorporate it into my django template though, those two are still usable. Clicking them sends the user to the top of the page just like any other anchor link with an id "#". I think I still have to have the there in order for Bootstrap to style it correctly.

Is there a way to write this so that when the user clicks one of the disabled "buttons" it doesn't do anything?

解决方案

In the docs, those buttons are just disabled manually. It has nothing to do with the .pagination styling.

You could use that

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

Note: If you use an ajax based pagination you have to put this piece of code in the update handler or use delegated events instead

这篇关于禁用Bootstrap分页链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！