|
Сообщение от bgraf
|
|
background не меняется
|
селекторы имеют вес
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.menu_servicesCategory a{
display:block;
cursor:pointer;
background-color:#f6f6fa;
height: 45px;
border-bottom: 1px solid #e7e7ed;
transition: 0.5s background box-shadow;
}
.menu_servicesCategory a.testA, .menu_servicesCategory a:hover{
background-color:#ffffff;
box-shadow: 0px 0px 45px -7px #e1e1e1;
border-radius: 5px;
border-bottom: 0;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var menuServicesCategory = document.querySelectorAll(".menu_servicesCategory li a");
[].forEach.call(menuServicesCategory, function(item) {
item.addEventListener('click', function(event) {
event.preventDefault();
[].forEach.call( menuServicesCategory, function(el) {
el == item ? el.classList.add('testA'): el.classList.remove('testA');
});
});
});
});
</script>
</head>
<body>
<ul class="menu_servicesCategory">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
</ul>
</body>
</html>