Jquery:Tag切换

Tag切换：

 

$(function(){
  $(".citytab>li").mouseover(function(){
      $(".citytab>li").removeClass("on");
      $(this).addClass("on");
      var target = $('#' + this.rel);
      if (target.size() > 0) {
          $('.details > span').hide();
          target.show();
      } else {
         alert('There is no such container.');
     }
 });
 $(".job>li").mouseover(function(){
      $(".job>li").removeClass("jobon");
      $(this).addClass("jobon");
      var target = $('#' + this.rel);
      if (target.size() > 0) {
          $('.jobbox > span').hide();
          target.show();
      } else {
         alert('There is no such container.');
     }
 });
});

 

<div id="citycaigou" class="details">
           <ul class="citytab">
                <li rel="a1" class="on">最新求购</li>
                <li rel="a2">最新供应</li>
                <li rel="a3">企业库</li>
            </ul>
            <span id="a1">
             <div id="city_cgDiv">123</div>
            </span>
            <span id="a2">
             <div id="city_cgDiv">123sdf</div>
            </span>
            <span id="a3">
             <div id="city_cgDiv">12df3</div>
            </span>
</div>