CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Gabriel Souza
Gabriel Souza

Reputation: 1015

How to completely disable a pagination link

When i click the disabled link it takes me to the top of the page. what I do for this not happen? I tried it with a javascript code and it did not work and this css did not work too. sorry about my english 

.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>

Upvotes: 1

Views: 4763

Answers (2)

davnig
davnig

Reputation: 342

You can use class="disabled" in your a tag like so:

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;
}

Upvotes: 2

KrishCdbry
KrishCdbry

Reputation: 1059

<ul class="pagination disabled"> // Add the disabled class to pagination

If you want to disable a particular link then add disabled class to the anchor tag for which you want to disable.

<a href="index.html" class="disabled"></a>

and modify &.disabled to just .disabled in css

Upvotes: 1

Related Questions