Нужно при нажатии на ссылку добавить класс другому блоку. И таких ссылок несколько штук. Мой код не работает, в чем проблема?
$(document).ready(function() {
// Добавить/убрать класс при клике на Пользователя
$("#user ul li a").click(function(e) {
e.preventDefault();
$("#user ul li a").removeClass('active');
$(this).addClass('active');
});
// При нажатии на пользователя подчеркнуть его возможности
$('li .user-1').on("click", function() {
$('.terminal').removeClass("active");
$('.terminal-2').addClass("active");
return false;
});
$('li .user-2').on("click", function() {
$('.terminal-2', '.terminal-3', '.terminal-4', '.terminal-5').removeClass("active");
$('.terminal-1').addClass("active");
return false;
});
});
.user a {
color: #e225e2;
}
.user .active {
transition: ease-in-out .1s;
background: #cf4dcf;
color: #fff;
}
.terminal.active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="user" id="user">
<h2>Пользователи</h2>
<ul>
<li class="user-wrap">
<a href="#" class="user-1" id="user1">Пользователь 1</a>
</li>
<li class="user-wrap">
<a href="#" id="user2">Пользователь 2</a>
</li>
<li class="user-wrap">
<a href="#" id="user3">Пользователь 3</a>
</li>
<li class="user-wrap">
<a href="#" id="user4">Пользователь 4</a>
</li>
<li class="user-wrap">
<a href="#" id="user5">Пользователь 5</a>
</li>
</ul>
</div>
<div class="terminal-wrap">
<h2>Терминалы</h2>
<ul>
<li class="terminal terminal-1" id="terminal1">Терминал 1</li>
<li class="terminal terminal-2" id="terminal2">Терминал 2</li>
<li class="terminal terminal-3" id="terminal3">Терминал 3</li>
<li class="terminal terminal-4" id="terminal4">Терминал 4</li>
<li class="terminal terminal-5" id="terminal5">Терминал 5</li>
</ul>
</div>
Заранее спасибо за ответ.