html - Bootstrap 分页和在 <li> 标签内使用 <a>

Question

根据 Bootstrap 文档，分页语法如下:

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><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="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

我得出的结论是有必要拥​​抱 <a> <li> 内的标签标签使分页看起来像 Bootstrap 设计应该的样子。但我想使用 JS 脚本作为点击操作，而不是跳转到指定的 URL。如果我使用“#”符号作为 href 属性，这个主题标签将出现在网络浏览器地址行中，这并不是真正的“漂亮”，在我看来甚至会导致一些错误。

那我该怎么办呢？忽略？剥离标签并留下空引号？深入研究 CSS 使分页看起来正确，而不依赖于使用 <a>标签在里面？

Answer 1

您可以通过简单地向您的 onclick 属性添加 return false 来解决这个问题。它看起来像这样:

<ul class="pagination">
    <li><a href="#" onclick="yourJsFunction(); return false;">&laquo;</a></li>
    <li><a href="#" onclick="yourJsFunction(); return false;">1</a></li>
    <li><a href="#" onclick="yourJsFunction(); return false;">2</a></li>
    <li><a href="#" onclick="yourJsFunction(); return false;">3</a></li>
    <li><a href="#" onclick="yourJsFunction(); return false;">4</a></li>
    <li><a href="#" onclick="yourJsFunction(); return false;">5</a></li>
    <li><a href="#" onclick="yourJsFunction(); return false;">&raquo;</a></li>
</ul>

这样会调用 JS 函数，但浏览器不会重定向到链接的 href。