当前页面链接未着色

Question

我正在建立一个固定侧导航的网页。但是当前页面不会突出显示所需的颜色。我在所有导航链接上都有一个“nav-item”，在当前页面上有一个“nav-item current”。我相信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>