在主页面加载导航栏
主页设置一个<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");//为当前导航页添加样式 }