Question

I use bootstrap pagination like this:

<ul class="pagination">  
<li class="page-item"><a class="page-link" >1</a></li>
<li class="page-item"><a class="page-link" >2</a></li>
<li class="page-item"><a class="page-link" >3</a></li>
<li class="page-item"><a class="page-link" >4</a></li>
<li class="page-item"><a class="page-link" >5</a></li></ul>

I want to change the border color of active element, I use :active selector:

a:active {
border: solid 2px #f51d19;}

But the :active selector doesn't work.

How can I change active element using a tag without href attribute?

Answer 1

以这种方式使用<a> nchor：

<a href='#/'>LINK</a>

将/添加到其中

只需在/ href值的末尾添加#，您就可以在没有跳转的情况下调用伪类调用的正常行为。

段

html,
body {
  width: 100%;
  height: 100%;
}
.top {
  height: auto;
  width: 300px;
  background: red;
  color: #fff;
  text-align: center;
}
hr:first-of-type {
  margin: 10px auto;
}
hr {
  background: #FFF;
  margin: 50px auto;
}
a {
  text-decoration: none;
}
a:link {
  color: blue;
}
a:visited {
  color: green;
}
a:hover {
  color: red;
}
a:hover:after {
  color: black;
  content: ' and is HOVERed over';
}
a:active {
  color: magenta;
  text-decoration: underline;
}
a:active:after {
  color: black;
  content: ' and is ACTIVE until you release your mouse button'
}

<div class='top'>
  <h1>TOP</h1>
  <hr>
  <h2>Scroll to the bottom</h2>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
</div>
<a href='#'>LINK will jump</a>
<br/>
<br/>
<a href='#/'>LINK will NOT jump</a>
<br/>
<br/>
<br/>

Answer 2

如果未应用:active样式，请确保（例如在浏览器开发人员工具的帮助下）不会覆盖您的样式。在这种情况下，请使用更高的特异性来使您的样式适用。

另外：href代码必须为a。只需使用占位符href喜欢这个：

<a href="#" class="page-link">1</a>

正如Bootstrap documentation所述：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Answer 3

Bootstrap将活动类添加到li元素。因此，您需要编写以下css来获取活动元素的边界。

li.active {border: solid 2px #f51d19;}

Answer 4

你可以在这里使用javascript就是我所做的。

$('li a').on('click',function(){
		$('li a').removeClass('active');
    $(this).addClass('active');
})

a.active {
border: 2px solid  #f51d19 !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pagination">  
<li class="page-item"><a class="page-link" >1</a></li>
<li class="page-item"><a class="page-link" >2</a></li>
<li class="page-item"><a class="page-link" >3</a></li>
<li class="page-item"><a class="page-link" >4</a></li>
<li class="page-item"><a class="page-link" >5</a></li></ul>

：<a> tag without href attribute

4 个答案:

段