<div class="nav_tab fl" id="APPGROUP">
<span>我的应用 ></span>
<a href="javascript:" class="active">管理平台</a>
<a href="javascript:">资源平台</a>
<a href="javascript:">质量平台</a>
</div>
<div class="icon w" id="SUBAPPLIST">
<ul style="display:block">
<li>
<a href="/oa/document/daiyue.html">
<img src="img/icon/oa.png" /><br />
<span></span>
</a>
</li>
</ul>
<ul style="display:none">
<li>
<a href="javascript:">
<img src="img/icon/information.png" /><br />
<span></span>
</a>
</li>
</ul>
<ul style="display:none">
<li>
<a href="javascript:">
<img src="img/icon/The teacher evaluation.png" /><br />
<span></span>
</a>
</li>
</ul>
</div>
一开始显示:管理平台下的各个功能。需要点击别的平台显示另外功能
$("#APPGROUP").on("click","a",function(){//这里是点击id为APPGROUP下面的A标签时触发事件。也就是点击平台的时候,如果你是DIV,就把A改成DIV
$(this).addClass("active").siblings("a").removeClass("active");//这里是你所点击的那个A标签添加class active,然后之前的A标签去掉active
var index = $(this).index()-1;//获取a标签的下标
//这里是id为SUBAPPLIST下面的UL标签eq遍历使下标使和上面一致的UL标签,然后将样式改为block。将之前的UL标签样式改为none。
$("#SUBAPPLIST>ul:eq("+index+")").css('display','block').siblings("ul").css('display','none');
})