jQuery 实现导航栏 lable页

 在主页面加载导航栏

 

主页设置一个<iframe>

 

<%@ include file="head.jsp"%>引入导航栏页面
<iframe id="iframepage"  width="100%"frameborder="0"scrolling="no"marginheight="0" marginwidth="0"></iframe>

 

 

 

导航栏页面  head.jsp

 

<div class="sg-nav">
	<ul id="my_nav" class="sg-navbar">
		<li id="li_num"><a href="javascript:void(0)" onclick="iFrameSrc('跳转页面地址(jsp)','(标签ID)li_num')">充电设施数量及分布情况</a></li>
		<li id="li_use"><a href="javascript:void(0)" onclick="iFrameSrc('跳转页面地址(jsp)','(标签ID)li_use')">桩车配比分析</a></li>
		<li id="li_evs"><a href="javascript:void(0)" onclick="iFrameSrc('跳转页面地址(jsp)','(标签ID)li_evs')">电动汽车保有量分析</a></li>
		<li id="li_fil"><a href="javascript:void(0)" onclick="iFrameSrc('跳转页面地址(jsp)','(标签ID)li_fil')">数据填报</a></li>
	</ul>
</div>

 导航栏 head.jsp  JS

$(function(){
		iFrameSrc('numberdistribution/index','li_num');//默认显示页面
	});
    function iFrameSrc(src, lid){//导航栏点击事件
		var ifm = document.getElementById("iframepage");
		ifm.src = src;
		$("#my_nav").children().removeClass("active");//移除ul下一级样式
		$("#" + lid).addClass("active");//为当前导航页添加样式
			}