jquery操作类似tab布局

<span class="tab-content">
       <ul>
               <li><a href="#" class="mapTab selected">内容一</a></li>
               <li><a href="#" class="mapTab">内容二</a></li>
               <li><a href="#" class="mapTab">内容三</a></li>
      </ul>

</span>

<div class="mapShow" style="width: 100%; height: 800px">

内容一
  </div>


 <div class="mapShow " style="width: 100%; height: 800px">

内容二
</div>


<div class="mapShow " style="width: 100%; height: 800px">

内容三
</div>

        $(".mapTab").each(function (i) {
            $(this).click(function () {
                $(".mapTab").removeClass("selected");
                $(this).addClass("selected");
                $(".mapShow").hide();
                $(".mapShow:eq(" + i + ")").show();
            });
        });