用jquery实现一种网页标签(tab)完美滑动切换效果

显示效果如下：



代码如下：
<div class="wp">
  <div class="slinks">
    <div class="title">
      <ul>
        <li id="link_1" class="tabshover">中央网盟</li>
        <li id="link_2">省内联盟</li>
        <li id="link_3">泗洪联盟</li>
      </ul>
    </div>
    <div class="cont">
      <div id="link_1_cont"> {pc:link  action="type_list" siteid="$siteid" typeid="53" order="listorder ASC" num="30"}
        {loop $data $v} <a href="{$v['url']}" title="{$v['name']}" target="_blank">{$v[name]}</a> |
        {/loop}
        {/pc} </div>
      <div id="link_2_cont" style="display:none;"> {pc:link  action="type_list" siteid="$siteid" typeid="54" order="listorder ASC" num="30"}
        {loop $data $v} <a href="{$v['url']}" title="{$v['name']}" target="_blank">{$v[name]}</a> |
        {/loop}
        {/pc} </div>
      <div id="link_3_cont" style="display:none;"> {pc:link  action="type_list" siteid="$siteid" typeid="55" order="listorder ASC" num="30"}
        {loop $data $v} <a href="{$v['url']}" title="{$v['name']}" target="_blank">{$v[name]}</a> |
        {/loop}
        {/pc} </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  jQuery(document).ready(function(){
   jQuery('.slinks ul li').hover(
    function(){
     jQuery(this).siblings().removeClass("tabshover");
     jQuery(this).addClass("tabshover");
     var tid = "#" + jQuery(this).attr('id') + "_cont";
     jQuery(tid).siblings().hide();
     jQuery(tid).show();
    },
    function(){}
   );
  });
</script>