Html Bootstrap 分页中的禁用链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12019707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabled link in Bootstrap Pagination
提问by Ed.
I'm trying to use Bootstrap's Pagination style. The documentation says to create the page list like so:
我正在尝试使用 Bootstrap 的分页样式。文档说要像这样创建页面列表：
<div class="pagination">
<ul>
<li class="disabled"><a href="#">«</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="#">»</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.
前两个链接，左箭头和 1，应该被禁用。当我将它合并到我的 django 模板中时，这两个仍然可用。单击它们会将用户发送到页面顶部，就像任何其他带有 id“#”的锚链接一样。我想我仍然需要在那里让 Bootstrap 正确地设置它的样式。
Is there a way to write this so that when the user clicks one of the disabled "buttons" it doesn't do anything?
有没有办法写这个，这样当用户点击一个禁用的“按钮”时它什么都不做？
回答by Sherbrow
In the docs, those buttons are just disabled manually. It has nothing to do with the .paginationstyling.
在文档中，这些按钮只是手动禁用。它与.pagination样式无关。
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 eventsinstead
注意：如果您使用基于 ajax 的分页，您必须将这段代码放在更新处理程序中或使用委托事件代替
回答by Elger Mensonides
If you write the html dynamically server side (with django for example) and you don't want to use javascript you could do this:
如果您动态编写 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>
}
回答by Dorian
As a reference, here is what Bootstrap does:
作为参考，以下是Bootstrap 的作用：
&.disabled,
&[disabled] {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
.opacity(.65);
.box-shadow(none);
}
回答by Oleg Polutsiganov
$('.disabled a').click(function(){
return false;
});
回答by user3241310
For PHPLD v 4.2 I used the following code to show Bootstrap 3 pagination
对于 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>
