Панель навигации Текущее состояние

Question

Привет всем Я сделал навигацию для своего сайта. Мне просто нравится менять цвет моих ссылок, когда я перехожу на другую страницу. Например, я нажимаю «about», после чего перейду к странице, на которой мне нравится, что ссылка на ссылку станет красной, когда я нахожусь на странице.

Как я могу это сделать? Спасибо!

Здесь коды

HTML

<nav> 
    <ul> 
     <li><a href="index.htm">Home</a></li> 
     <li><a href="about.htm">About</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Creatives For Less</a></li> 
     <li><a href="#">Blogs</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 

CSS:

nav { 
    float: right; 
    margin-top: 13px; 
    margin-right: 40px; 
} 

nav ul { 
    font-family: josefin; 
    list-style-type: none; 
    font-size: 11pt; 
    text-transform: uppercase; 
} 

nav li { 
    display: inline; 
    padding-left: 15px; 

} 

nav li a{ 
    text-decoration: none; 
    color: #0ff; 
} 

nav li a:hover, a:active { 
    color: #fff; 
} 

Answer 1

Вы можете добавить некоторый класс css с javascript или с некоторым серверным языком.

Если вы будете использовать javascript, вы должны найти что-то, что указывает на то, что пользователь находится на странице (например, какой-либо div с информацией). И затем, если вы используете JQuery, добавьте этот класс:

$('#mylink').addClass('active'); 

Answer 2

Просто есть active класс, и если вы находитесь на странице, установите <li> иметь этот класс ,

Например:

<li class="active"><a href="#">Services</a></li> 

И в вашем стиле CSS в active класса:

nav li.active a{ 
    color: red; 
} 

Если вы спрашиваете, как вы знаете, на какой странице вы находитесь, хотя, и хотите сделайте это динамически, вам нужно будет использовать PHP, другой серверный язык или JavaScript.

Answer 3

Использовать a: побывало в вашем CSS.

a: посетило { цвет фона: желтый; }

Вы должны смотреть в настройки классы для них тоже, а затем назначить их через CSS