There is a website
Layout the header of the site. It is necessary that when you click on one button, the color of this button becomes lilac, and the previously selected buttons become white.
<script>
$(document).ready(function() {
all__buttons=document.querySelectorAll('.header__button');
/*selected__button.click= function(){
selected__button.backgroundColor='#5f3ec0';
};*/
function changeColor(inputbutton) {
inputbutton.backgroundColor='#5f3ec0';
}
[].forEach.call(all__buttons, function(selected__button){
selected__button.addEventListener("click", changeColor);
});
}
)
</script>body {
margin: 0;
padding: 0;
}
.globalcontainer {
margin-top: 0;
margin-right: 15;
margin-bottom: 0;
margin-left: 15;
}
.headertext {
position: relative;
width: 93px;
height: 24px;
/*left: 15px;*/
top: 129px;
font-family: TT Norms/*, Arial, sans-serif*/;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
.header__button {
background-color: #5f3ec0;
}<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons">
<span>
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
</span>
</div>
</div>
<div class="content">
<div class="cardexample">
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>But as a result, after clicking the mouse, the button color does not change to lilac. Tell me how to change the color of the button on click.
Aucun commentaire:
Enregistrer un commentaire