PBOOTCMS 使用JQ实现切换效果
HTML部分：
<div class="classwrap1">
{pboot:nav parent=3 num=3}
<div class="classitem"> <img src="[nav:ico]" alt=""> <span>[nav:name]</span> <i class="redicon "></i> </div>
{/pboot:nav}
</div>
{pboot:nav parent=3 num=3}
<div class="listwrap">
{pboot:list scode=[nav:scode] num=10}
<div class="goods_wrap" id="fuzhu[list:id]">
<div class="goods3">
<div class="goods_pic">
<table width="990" height="281" border="0">
<tbody>
<tr>
<td width="350" class="fuzhu-info1">
<img src="[list:ico]" width="340" height="251" alt="">
</td>
<td width="410" class="fuzhu-info"><h3>[list:title]</h3>
<p>支持系统：[list:ext_zcxt]</p>
<p>功能列表：[list:ext_gnlb]</p>
<p>安全指数：[list:ext_aqzs]</p>
<strong>商品价格：[list_ext_spjg]</strong></td>
<td width="230">
<div class="right-button" style="padding: 10px 0;">
<a class="btn buy" href="[list:ext_gmkm]" title="点击购买卡密" target="_blank">购买卡密链接</a>
<a class="btn down" href="[list:ext_xzrj]" title="点击网盘下载" target="_blank">点击网盘下载</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
{/pboot:list}
</div>
{/pboot:nav}
JS部分：
<script>
jQuery(".classwrap1 div").eq(0).addClass("active");//获取第一个切换栏目并高亮
</script>
<script>
$(".listwrap").eq(0).addClass("active2");//获取第一个主体列表并高亮
$(".classwrap1 div").click(function(){//点击栏目的动作
var index = $(this).index();//获取点击的索引
console.log(index);
$(".classwrap1 div").removeClass("active");//移除栏目所有高亮
$(this).addClass("active");//添加点击时的高亮
$(".listwrap").removeClass("active2");//移除主体所有高亮
$(".listwrap").eq(index).addClass("active2");//添加点击对应的主体高亮
})
</script>
