Como dice en el título, quiero que el nav
quede con un color al hacer clic, en el siguiente código de JavaScript pueden probar que si usando querySelector
funciona pero solo con el primer LI "portafolio" del nav
y yo quiero que funcione con todos por eso use luego querySelectorAll
pero me tira error.
let navcolor = document.querySelector(".cambiar-color");
navcolor.addEventListener('mousedown', ()=>{
navcolor.style="color:#ff3131";
});
*{
padding: 0;
margin: 0;
box-sizing: border-box;
background: #1a1919;
color: #F7F0F5;
}
header{
position: fixed;
width: 100%;
height: 10vh;
margin: 0 10px;
display: flex;
justify-content: space-around;
}
#header__nav{
display: flex;
align-items: center;
list-style: none;
}
<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="style.css">
<title>Document</title>
</head>
<body>
<header>
<ul id="header__nav">
<li><a href="#portafolio" class="cambiar-color">Portafolio</a></li>
<li><a href="#habilidad" class="cambiar-color">Habilidades</a></li>
<li><a href="#contacto" class="cambiar-color">Contacto</a></li>
</ul>
</header>
<script src="codigo.js"></script>
</body>
</html>