Question

我在Bootstrap页面上进行了一次垂直导航。现在，当我单击其他链接时，我想更改活动链接的颜色并为其添加一个右边框。

这是我当前的代码：

.navbar-sidenav {
    position: relative;
    flex-direction: column;
    background-color: #f1f1f1;
}

<ul class="nav navbar-sidenav">
    <li class="nav-item active">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-tachometer-alt margin-r"></i>Dashboard</a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-users margin-r"></i>Users</a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-users margin-r"></i>About</a>
    </li>
</ul>



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Answer 1

a：active {...}

记住“爱，哈！”

:link
:visited
:hover
:active

为获得最佳效果，请按该顺序设置样式

Answer 2

查看示例在这里：

.navbar-sidenav {
    position: relative;
    flex-direction: column;
    background-color: #f1f1f1;
}

.navbar-sidenav .nav-item.active{
  border-right: 5px solid #ff0000;
}

.navbar-sidenav .nav-item.active a{
  color: #ff0000;
}

.navbar-sidenav .nav-item:hover{
  border-right: 5px solid #ff0000;
}

.navbar-sidenav .nav-item a:hover{
  color: #ff0000;
}

<ul class="nav navbar-sidenav">
    <li class="nav-item active">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-tachometer-alt margin-r"></i>Dashboard</a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-users margin-r"></i>Users</a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-users margin-r"></i>About</a>
    </li>
</ul>



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

如何更改Bootstrap活动链接的颜色

2 个答案: