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

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

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

html代码如下：

01.
<div class="cl_title">
02.
<a href="javascript::void(0);" class="on">最新推荐</a>
03.
<a href="javascript::void(0);">经典推荐</a>
04.
</div>
05.
<div class="ml_body">
06.
{pc:content action="position" posid="2" order="listorder DESC" thumb="1" num="10"}
07.
{loop $data $r}
08.
<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>
09.
{/loop}
10.
{/pc}
11.
</div>
12.
<div class="ml_body" style="display:none;">
13.
{pc:content action="position" posid="12" order="listorder DESC" thumb="1" num="10" }
14.
{loop $data $r}
15.
<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>
16.
{/loop}
17.
{/pc}
18.
</div>