BootStrap3 笔记（一）：关于分页组件中<a>标签disable后还是可以点击的问题

本文链接：https://blog.youkuaiyun.com/sinat_34466896/article/details/72861258

本文介绍了如何通过调整Bootstrap按钮类的使用方式来解决分页功能失效的问题。具体做法是在a标签上应用.disabled类而非直接作用于li元素。此外，文章还提供了一个使用小脚本控制的分页代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如题，我参考这篇博客http://blog.youkuaiyun.com/jalon2015/article/details/71056702
把a改为span之后，分页功能完全失效。正常的点击后也无效。无耐，我就继续看文档菜鸟教程上的按钮介绍http://www.runoob.com/bootstrap/bootstrap-buttons.html。写下本篇

如下：

这里写图片描述

解决方法：

**
简单的来说就是不在li上加.disable ，在a标签的class 加.disabled

<li>
    <a href="#" class="btn disabled" >首页</a>
</li>

必须带上.btn 类。否则无效。同理也可以用button标签来实现
这里写图片描述

完美解决了我的问题！O(∩_∩)O哈哈~

下面附上我的分页代码（小脚本控制的）：

<nav style="text-align: right;">
            <ul class="pagination">
                <li>
                     <a href="javascript:openPage(1)" class="btn <%=currentPage==1?"disabled":""%>" >首页</a>
                </li>
                <li>
                     <a href="javascript:openPage(<%=currentPage-1%>)" class="btn <%=currentPage==1?"disabled":""%>" >上一页</a>
                </li>
                <li>
                     <a href="javascript:openPage(<%=currentPage+1%>)" class="btn <%=currentPage==pageSize?"disabled":""%>" >下一页</a>
                </li>
                <li>
                     <a href="javascript:openPage(<%=pageSize%>)" class="btn <%=currentPage==pageSize?"disabled":""%>" >尾页</a>
                </li>
            </ul>
        </nav>