我的应用：点击一个图标，显示对应功能

<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');
})