导航栏 - 如何为活动链接添加下划线或更改颜色？

Question

我有导航栏。 我想在活动的菜单中加下划线链接。 那怎么办？

 .nav a:active { text-decoration: underline; } .nav a:active { background-color: red!important; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="/">info</a> </div> <ul class="nav navbar-nav"> <li><a href="/main">Main site</a> </li> <li><a href="/login">/login</a> </li> <li><a href="/first">/first</a> </li> <li><a href="/second">/second</a> </li> <li><a href="/third">Sport</a> </li> <li><a href="/fourth">fourth</a> </li> </ul> </nav>

但它不起作用。 我搜索了类似的主题，但没有找到好的解决方案。

Answer 1

我认为您的代码已经更改了活动颜色。 但是我相信您正在考虑引导程序的活动元素。

CSS :active选择器用于当您想在单击时更改元素的特性时（单击并按住时可以看到效果）。 在引导程序中添加，

class="active"

元素上的样式将根据您所在的页面而变化。 看看我是如何修改 CSS 的？ 这将更改您所在页面的活动元素的背景。

 .nav a:active { text-decoration: underline; } .nav a:active { background-color: red !important; } /* Notice how we added an id? This let's us be more specific and override the bootstrap selector */ .navbar > #my-nav > .active > a { background-color: red; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="#">info</a> </div> <ul id="my-nav" class="nav navbar-nav"> <li class="active"> <a href="#">Main site</a> </li> <li> <a href="#">login</a> </li> <li> <a href="#">first</a> </li> <li> <a href="#">second</a> </li> <li> <a href="#">Sport</a> </li> <li> <a href="#">fourth</a> </li> </ul> </nav> <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

旁注：背景不会改变，直到你的网站有不同的页面可供访问。 例如你会改变，

<li class="active"> <a href="home.html">Main site</a> </li>

然后每当您从另一个页面单击它时，它都会将背景更改为红色。

Answer 2

你需要使用 php 才能得到你想要的。

首先给每个页面一个名字：

<?php $page='home'; ?>

然后转到您的导航并将以下内容添加到您的导航中

 <li><a <?php if($page == 'Home') {echo 'class="active"';} ?> href="index.php">Home</a></li>

最后在你的 css 中创建一个名为 active 的类并设置它的样式

.active{
text-decoration: underline;
}

这应该可以解决问题