當前頁面鏈接未突出顯示

Question

我正在建立一個帶有固定側面導航的網頁。 但是，當前頁面不會突出顯示所需的顏色。 我在所有導航鏈接上都有一個“導航項”，在當前頁面上有一個“導航項當前”。 我相信html很好，而且我認為CSS也很好，但是我不明白為什么它不會突出顯示。

 .nav-container { display: block; clear: left; padding-top: 35px; } .navigation { width: 75%; margin: auto; clear: left; } .current { color: #36d9d3; } .nav-item { text-decoration: none; box-sizing: border-box; clear: left; float: left; display: block; margin: 10px; font-size: 20px; color: black; font-family: 'Raleway', sans-serif; -webkit-transition: 200ms color ease; } .nav-item:hover { color: grey; } 

 <div class="nav-container"> <nav class="navigation"> <a class="nav-item current" href="#">Illustrations</a> <a class="nav-item" href="#">Designs</a> <a class="nav-item" href="#">Artwork</a> <a class="nav-item" href="#">Photography</a> </nav> </div> 

Answer 1

隨着樣式的變化，請在顏色中加上!important作為current顏色。 對於在外部樣式表中定義的樣式，對於兩個相同的屬性，優先級按從下到上的順序排列

 .nav-container { display: block; clear: left; padding-top: 35px; } .navigation { width: 75%; margin: auto; clear: left; } .current { color: #36d9d3 !important; } .nav-item { text-decoration: none; box-sizing: border-box; clear: left; float: left; display: block; margin: 10px; font-size: 20px; color: black; font-family: 'Raleway', sans-serif; -webkit-transition: 200ms color ease; } .nav-item:hover { color: grey; } 

 <div class="nav-container"> <nav class="navigation"> <a class="nav-item current" href="#">Illustrations</a> <a class="nav-item" href="#">Designs</a> <a class="nav-item" href="#">Artwork</a> <a class="nav-item" href="#">Photography</a> </nav> </div> 

Answer 2

看看這個，得到一個主意。

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

 a { color:#000; text-decoration:none; } a:hover { text-decoration:underline; } a:visited { color:#000; } .nav { padding:10px; border:solid 1px #c0c0c0; border-radius:5px; float:left; } .nav li { list-style-type:none; float:left; margin:0 10px; } .nav li a { text-align:center; width:55px; float:left; } .nav li.active { background-color:green; } .nav li.active a { color:#fff; font-weight:bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="nav"> <li><a href="#tab1">Menu 01</a> </li> <li>|</li> <li><a href="#tab2">Menu 02</a> </li> <li>|</li> <li><a href="#tab3">Menu 03</a> </li> </ul>