用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:linkaction="type_list" siteid="$siteid" typeid="53" order="listorder ASC" num="30"}
{loop $data $v} <a href="{$v['url']}" title="{$v['name']}" target="_blank">{$v}</a> |
{/loop}
{/pc} </div>
<div id="link_2_cont" style="display:none;"> {pc:linkaction="type_list" siteid="$siteid" typeid="54" order="listorder ASC" num="30"}
{loop $data $v} <a href="{$v['url']}" title="{$v['name']}" target="_blank">{$v}</a> |
{/loop}
{/pc} </div>
<div id="link_3_cont" style="display:none;"> {pc:linkaction="type_list" siteid="$siteid" typeid="55" order="listorder ASC" num="30"}
{loop $data $v} <a href="{$v['url']}" title="{$v['name']}" target="_blank">{$v}</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>
页:
[1]