現在のページのリンクが強調表示されていません

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

あなたのスタイルに乗らを乗り越えているようcurrentのためのあなたの色に!importantを追加します。外部スタイルシートで定義されたスタイルのために、優先順位は、2つの同一の属性

.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>