Как изменить цвет шрифта текущей ссылки

Question

HTML:

<div id="nav_item" style="overflow:visible;"> 
     <nav> 
     <ul> 
     <li><a href="./index.php">HOME</a></li> 
     <li><a href="./About_us.php">ABOUT US</a></li> 
     <li><a href="./contact_us.php">CONTACT US</a></li> 
     <li><a href="./feedback.php">YOUR FEEDBACK</a></li> 
     </ul> 
     </nav> 

</div> 

Как изменить цвет шрифта текущего Линка (позволяет сказать, если я открыл «About_us.php»)?

Answer 1

Попробуйте

a:active 
 
{ 
 
    color:yellow; 
 
} 
 
/* for visited */ 
 
a:visited { 
 

 
    color: red; 
 

 
}

<div id="nav_item" style="overflow:visible;"> 
 
     <nav> 
 
     <ul> 
 
     <li><a href="./About_us.php">HOME</a></li> 
 
     <li><a href="./About_us.php">ABOUT US</a></li> 
 
     <li><a href="./contact_us.php">CONTACT US</a></li> 
 
     <li><a href="./feedback.php">YOUR FEEDBACK</a></li> 
 
     </ul> 
 
     </nav> 
 

 
</div>

Answer 2

a:active 
    { 
     color: #ff0000; 
    } 

DEMO HERE

Answer 3

Я не знаю, если вы используете общий файл меню для каждого сайта, или у вас есть это меню жестко закодировано на каждой странице, которую вы там видите, но если меню кодируется на каждую страницу отдельно:

Вы можете использовать класс .active CSS вместо селектора :active. Насколько мне известно, для определения того, на какой странице вы находитесь, требуется некоторая конфигурация, или, по крайней мере, у меня нет работы в старых проектах, когда я не использовал фреймворк вокруг своей страницы.

CSS:

.active { 
    color: #ff0000; 
} 

HTML:

<div id="nav_item" style="overflow:visible;"> 
    <nav> 
    <ul> 
    <li><a href="./About_us.php" class="active">HOME</a></li> 
    <li><a href="./About_us.php">ABOUT US</a></li> 
    <li><a href="./contact_us.php">CONTACT US</a></li> 
    <li><a href="./feedback.php">YOUR FEEDBACK</a></li> 
    </ul> 
    </nav> 
</div> 

И после того, как все они созданы, вы можете изменить функцию class в другом месте, на другую страницу. Этот пример будет работать, когда вы находитесь на первой странице. Просто переместите класс на другую ссылку на другой странице.

Это простой способ сделать это, хотя это не простой способ создать сайт в целом.

Answer 4

Вы делаете это неправильно. : active - это селектор, который запускается, когда клик определяется css. Если вы применяете стили к: активному селектору, эти стили будут видны при щелчке по объекту. (Попробуйте нажать и удерживать, тогда вы увидите стили, которые вы применили)

Чтобы выделить текущую страницу, вам нужно добавить класс на текущую страницу и добавить свои собственные стили в этот класс. См. Эту демонстрацию. http://codepen.io/anon/pen/MYYWjM

HTML Должно быть, как это

<a href="#">Click here and hold to see the :active<a> 
<br><br> 
<a class="active" href="#">This is blue by default</a> 

И CSS

a:active {color: red;} 
a.active {color: blue;} 

PS - И НЕТ, нет ярлыка. Класс должен быть добавлен. И вам нужно будет что-то выяснить, чтобы добавить класс автоматически :) Поскольку вы спросили об этом, вам лучше попробовать w3schools, codeacadamy и т. Д., Чтобы улучшить свои знания. Вы найдете несколько хороших обучающих онлайн.