Bootstrap分页中禁用的链接
Bootstrap分页中禁用的链接
提问于 2012-08-18 23:16:35
我正在尝试使用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>应禁用前两个链接，即左箭头和1。但是，当我将它合并到我的django模板中时，这两个仍然是可用的。单击它们会将用户发送到页面顶部，就像任何其他带有id "#“的锚点链接一样。我认为为了让Bootstrap正确地设置它的样式，我仍然需要使用它。
有没有办法写成这样，当用户点击一个被禁用的“按钮”时，它什么也不做？
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-08-19 02:35:44
在文档中，这些按钮只是手动禁用。它与.pagination样式无关。
你可以用它
$('.pagination .disabled a, .pagination .active a').on('click', function(e) {
e.preventDefault();
});注意:如果使用基于ajax的分页，则必须将这段代码放入更新处理程序或使用delegated events
Stack Overflow用户
发布于 2013-09-13 10:39:53
如果你在服务器端动态编写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>
}Stack Overflow用户
发布于 2014-06-25 00:20:56
作为参考，下面是what Bootstrap does
&.disabled,
&[disabled] {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
.opacity(.65);
.box-shadow(none);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12019707
复制相关文章
相似问题
腾讯云开发者
