前端中经常用到tab标签切换的效果，其实实现代码很简单，使用jq来撰写代码只需要简短的几行，也很好理解

首先引入jquery库，具体JS代码文件如下：

<script type="javascript">
$(".cl_title > a").hover(function() {
    var index = $(".cl_title > a").index(this);
    $(".cl_title > a").removeClass("on").eq(index).addClass("on");
    $(".ml_body").hide().eq(index).show();
});
<script>

html代码如下：

<div class="cl_title">
<a href="javascript::void(0);" class="on">最新推荐</a>
<a href="javascript::void(0);">经典推荐</a>
</div>
<div class="ml_body">
{pc:content action="position" posid="2" order="listorder DESC" thumb="1" num="10"}
{loop $data $r}
<dl><dt><a href="{$r[url]}" title="《{$r[title]}》高清下载" target="_blank"><img src="{thumb($r['thumb'],125,174)}" alt="{$r[title]}" /></a></dt><dd><a href="">{str_cut($r['title'],30)}</a></dd></dl>
{/loop}
{/pc}
</div>
<div class="ml_body" style="display:none;">
{pc:content action="position" posid="12" order="listorder DESC" thumb="1" num="10" }
{loop $data $r}
<dl><dt><a href="{$r[url]}" title="《{$r[title]}》高清下载" target="_blank"><img src="{thumb($r['thumb'],125,174)}" alt="{$r[title]}" /></a></dt><dd><a href="">{str_cut($r['title'],30)}</a></dd></dl>
{/loop}
{/pc}
</div>