Как при клике на следующий элемент сделать предыдущий неактивным

407

22 января 2017, 16:58

Нужна такая карта https://irobot.ru/contacts/

<ul id="map-hover">
  <li id="area01" ><span class="title"><span>Центральный</span></span></li>
  <li id="area02" ><span class="title"><span>Приволжский</span></span></li>
  <li id="area03" ><span class="title"><span>Казахстан</span></span></li>
</ul>

function map(n) {
  $('li:nth-child(' + n + ') .title span').on('click', function (){
    $('#map-hover li:nth-child(' + n + ')').addClass('active activestate');
  });
}
var li = $('#map-hover li');
for (var i = 0; i <= li.length; i++) {
  map(i);
}

Answer 1

Сначала надо удалить этот класс со всех элементов, а потом проставить тому, по которому был клик:

$('#map-hover').on('click', 'li', function() { 
	$('#map-hover li').removeClass('active') 
	$(this).addClass('active') 
})

.active { 
	background: red 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<ul id="map-hover"> 
  <li id="area01" ><span class="title"><span>Центральный</span></span></li> 
  <li id="area02" ><span class="title"><span>Приволжский</span></span></li> 
  <li id="area03" ><span class="title"><span>Казахстан</span></span></li> 
</ul>