導航欄 - 如何為活動鏈接添加下划線或更改顏色？

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

這應該可以解決問題