Изменить цвет по нажатым ссылкам навигации CSS - PullRequest
Новая
       1

Изменить цвет по нажатым ссылкам навигации CSS

0 голосов
/ 17 мая 2018

Я хотел бы изменить цвет активной ссылки на моей навигационной панели. Я пытался использовать псевдоклассы active, focus, hover, target, посещения, но ни один из них не сработал.

Посещенный класс не делает именно то, что я хочу. Цвет должен меняться в зависимости от того, по какой ссылке на навигационной панели я щелкнул, чтобы не оставаться навсегда. 

<ul>
 <li><a href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
</ul>

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Вам нужно будет добавить класс к этому предмету, чтобы сделать это.: active,: focus,: посещения и т. д. не работают с нужной вам функциональностью.Вы можете получить желаемую функциональность, добавив onclick(), который удаляет класс из всех остальных и добавляет его к последнему нажатому: 

var activeId = "";

function addActiveClass(elId) {
  if (activeId !== "") {
    document.getElementById(activeId).className = "";
  }
  document.getElementById(elId).className = "active";
  activeId = elId;
}
#home-link.active {
  color: red;
}

#news-link.active {
  color: blue;
}

#contact-link.active {
  color: green;
}

#about-link.active {
  color: orange;
}
<ul>
  <li><a href="#home" id="home-link" onclick="addActiveClass('home-link');">Home</a></li>
  <li><a href="#news" id="news-link" onclick="addActiveClass('news-link');">News</a></li>
  <li><a href="#contact" id="contact-link" onclick="addActiveClass('contact-link');">Contact</a></li>
  <li><a href="#about" id="about-link" onclick="addActiveClass('about-link');">About</a></li>
</ul>
0 голосов
/ 17 мая 2018

попробуйте это: 

<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: purple;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>
<a href="ping.php" target="#">ping</a>
</li>
</ul>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...