<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);
}