对Ul下的li标签执行点击事件，并操作相关事件

情景：
1.当点击当前元素增加addClass一个样式，并对其他的元素进行删除样式；
2.当点击某个元素，div盒子内容显示相应内容

<ul id="activeLi">
   <li class="box">北京</li>
   <li class="box">广州</li>
   <li class="box">上海</li>
   <li class="box">河南</li>
</ul>
<div class="cont-box">
    <div id="cont-box1" class="cont-box1">
      内容一
    </div>
     <div id="cont-box2" class="cont-box2">
       内容二
    </div>
</div>

//只需要找到你点击的是哪个ul里面的就行
$("ul#activeLi").on("click","li",function(e){
    $(this).addClass('active');//1  获取当前点击的元素$(this) ,并添加class
    $(this).siblings('li').removeClass('active');  // 删除其他兄弟元素的样式
    if($(e.target).parents("li").attr('class') === 'li-box1 active'){   //2  当点击第一个li的时候显示第一块内容，隐藏第二块内容
    $('#cont-box1').fadeIn();  //显示
    $('#cont-box2').hide();    //隐藏
    }
    });