html - 如何完全禁用分页链接

Question

当我单击禁用的链接时，它会将我带到页面顶部。我为这不会发生做什么？我用 javascript 代码试了一下，但没有用，这个 css 也没有用。对不起我的英语

.pagination ul {
  display: inline-block;
  padding: 0;
  margin: 0;
}

.pagination li {
  display: inline;
}

.pagination li a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination li.active a {
  background-color: red;
  color: white;
}

.pagination li:hover.active a {
  background-color: red;
}

.pagination li:hover:not(.active) a {
  background-color: #ddd;
  color: black;
}

&.disabled,
&[disabled] {
  cursor: not-allowed;
  pointer-events: none; // Future-proof disabling of clicks
  .opacity(.65);
  .box-shadow(none);
}

<div class="container text-center">
  <ul class="pagination">
    <li class="disabled"><a href="">«</a></li>
	<li class="active"><a href="index.html">1</a></li>
    <li><a href="videos2.html">2</a></li>
    <li><a href="videos2.html">»</a></li>
  </ul>
</div>

Answer 1

您可以在 a 标签中使用 class="disabled"，如下所示:

HTML

<ul class="pagination">
  <li><a class="disabled" href="">«</a></li>
  <li class="active"><a href="index.html">1</a></li>
  <li><a href="videos2.html">2</a></li>
  <li><a href="videos2.html">»</a></li>
</ul>

CSS

.disabled {
    pointer-events: none;
}