CSS: как изменить цвет активного меню страницы навигации

Я пытаюсь изменить цвет активной или текущей ссылки навигации по странице, выбранной пользователем на моем сайте. Что я делаю не так? Спасибо.

пока CSS выглядит так:

div.menuBar
{
   font-family: BirchStd;
   font-size: 40px;
   line-height: 40px;
   font-weight: bold;
   text-align: center;
   letter-spacing: -0.1em;
}

div.menuBar li{list-style:none; display: inline;}
div.menuBar li a:active{color:#FF0000;}
div.menuBar ul{margin:0;}

и мой HTML вызывает шаблон страницы для меню навигации с помощью функции include PHP:

<div class="menuBar">
  <ul>
  <li><a href="index.php">HOME</a></li>
  <li><a href="two.php">PORTFOLIO</a></li>
  <li><a href="three.php">ABOUT</a></li>
  <li><a href="four.php">CONTACT</a></li>
  <li><a href="five.php">SHOP</a></li>
 </ul>

11
css navigation

3 ответов

Я думаю, что вы путаетесь о том, что a:active селектор CSS делает. Это изменит цвет вашей ссылки только при щелчке по ней (и только на время щелчка, т. е. как долго ваша кнопка мыши остается внизу). Что вам нужно сделать, это ввести новый класс, например,.selected в CSS и при выборе ссылки обновите выбранный пункт меню новым классом, например

<div class="menuBar">
    <ul>
        <li class="selected"><a href="index.php">HOME</a></li>
        <li><a href="two.php">PORTFOLIO</a></li>
        ....
    </ul>
</div>

// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS
li.selected a { color: #FF0000; }

вам нужно будет обновить страницу шаблона, чтобы принять в

22

CSS :active state означает активное состояние нажатой ссылки - момент, когда вы нажали на нее, но еще не отпустили кнопку мыши, например. Он не знает, на какой странице вы находитесь, и не может применять стили к пунктам меню.

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

a.active { color: #f00 }

<ul>
    <li><a href="index.php" class="active">HOME</a></li>
    <li><a href="two.php">PORTFOLIO</a></li>
    <li><a href="three.php">ABOUT</a></li>
    <li><a href="four.php">CONTACT</a></li>
    <li><a href="five.php">SHOP</a></li>
</ul>
5

добавить ID current для активной/текущей странице:

<div class="menuBar">
  <ul>
  <li id="current"><a href="index.php">HOME</a></li>
  <li><a href="two.php">PORTFOLIO</a></li>
  <li><a href="three.php">ABOUT</a></li>
  <li><a href="four.php">CONTACT</a></li>
  <li><a href="five.php">SHOP</a></li>
 </ul>

#current a { color: #ff0000; }
3