Need such a card 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); }

    1 answer 1

    First you need to remove this class from all elements, and then put down the one that was clicked:

     $('#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>