首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Bootstrap分页中禁用的链接

Bootstrap分页中禁用的链接
EN

Stack Overflow用户
提问于 2012-08-18 23:16:35
回答 5查看 36.3K关注 0票数 17

我正在尝试使用Bootstrap的分页风格。文档要求创建页面列表,如下所示:

代码语言:javascript
复制
<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正确地设置它的样式,我仍然需要使用它。

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

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2012-08-19 02:35:44

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

你可以用它

代码语言:javascript
复制
$('.pagination .disabled a, .pagination .active a').on('click', function(e) {
    e.preventDefault();
});

注意:如果使用基于ajax的分页,则必须将这段代码放入更新处理程序或使用delegated events

票数 30
EN

Stack Overflow用户

发布于 2013-09-13 10:39:53

如果你在服务器端动态编写html (例如,使用django ),并且你不想使用javascript,你可以这样做:

代码语言: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>
}
票数 6
EN

Stack Overflow用户

发布于 2014-06-25 00:20:56

作为参考,下面是what Bootstrap does

代码语言:javascript
复制
&.disabled,
&[disabled] {
  cursor: not-allowed;
  pointer-events: none; // Future-proof disabling of clicks
  .opacity(.65);
  .box-shadow(none);
}
票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12019707

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档