How do you change the color of a certain item in a list?-CodePudding

I am working on a website, and I am building the navigation bar. I am trying to make it so when the user is on a certain page, it darkens the color of the word. How do I change the certain item instead of changing the entire list. I am not very good in web design, so any help would be great.

@import url('https://fonts.googleapis.com/css2?family=Roboto Mono:wght@700&display=swap');

html body{
  background: #0E1212;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: none;
   font-family: 'Roboto Mono', monospace;
}

li {
  float: left;
}



li a {
  display: block;
  color: #DBDBDB;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
}

li a:hover {

  color: #682AE9;
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes example {
  0%   {color: #DBDBDB;;}
  100% {color: #622cd8;;)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="home.css">
  <title>Home</title>
</head>
<body>
  


</head>
<body>

<ul>
  <li><a  href="home.html">.home()</a></li>
  <li><a href="#news">.about()</a></li>
  <li><a href="#contact">.stuff()</a></li>
  <li><a href="#about">.apply()</a></li>
</ul>
  
</body>
</html>

CodePudding user response：

All you need to do is create a CSS selector and set it to target the .active class and give the link the class of the .active so whatever properties you set under the CSS selector brackets are applied. In this example, I've made the text grey when the active class is on it.

@import url('https://fonts.googleapis.com/css2?family=Roboto Mono:wght@700&display=swap');

html body{
  background: #0E1212;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: none;
   font-family: 'Roboto Mono', monospace;
}

li {
  float: left;
}



li a {
  display: block;
  color: #DBDBDB;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
}

li a:hover {

  color: #682AE9;
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.active {
  color: #808080;
}

@keyframes example {
  0%   {color: #DBDBDB;;}
  100% {color: #622cd8;;)
 }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="home.css">
  <title>Home</title>
</head>
<body>
  


</head>
<body>

<ul>
  <li><a  href="home.html">.home()</a></li>
  <li><a href="#news">.about()</a></li>
  <li><a href="#contact">.stuff()</a></li>
  <li><a href="#about">.apply()</a></li>
</ul>
  
</body>
</html>

CodePudding user response：

To do this, you need JavaScript:

var gItem = 0
function change(item){
  const menu = Array.from(document.getElementById('menu').getElementsByTagName('a'))
  menu[gItem   1].style.color = 'white'
  gItem = item
  menu[gItem   1].style.color = 'blue'
}

next, add onclick events and ids to the menu:

<ul id='menu'>
  <li><a  href="home.html">.home()</a></li>
  <li><a onclick="change(0)" href="#news">.about()</a></li>
  <li><a onclick="change(1)" href="#contact">.stuff()</a></li>
  <li><a onclick="change(2)" href="#about">.apply()</a></li>
</ul>

The script simply simply has a global variable storing the colored menu item. When the item is clicked, it changes the colored item to blue, and changes the previously clicked element to white.

It is designed so that as many menu items can be added as you want. For it to function properly, it must be a child of the menu tag, and must have an onclick event saying:

onclick="change(element index)"