在一个工程中,header部分一般都是公用的,有些导航也在header里面,点击菜单,跳转页面,点击另外一个,跳转到另外的页面。
//这是header.jsp部分
如html代码:<ul class="nav_menu">
<li class="articlemsg"><a href="${basePath}/back/article/index.html">文章管理</a></li>
<li class="menumsg"><a href="${basePath}/back/menu/index.html">菜单管理</a></li>
<li class="usermsg"><a href="${basePath}/back/user/index.html">用户管理</a></li>
</ul>
有3个导航栏目,这是header部分,你点击会跳转到相应的页面,但是一般你都要给li 或者a加样式,这就得在js中完成。
代码如下:
<script type="text/javascript">
$(function(){
var url = window.location.href ; //获取url地址
if(url.indexOf("article") >= 0){ //判断获取的地址字符串中有没有 article字符串 有就执行添加focus_bg类,a字体颜色改变
$(".articlemsg").addClass("focus_bg").children("a").css("color","#093153");
}else if(url.indexOf("menu") >= 0){
$(".menumsg").addClass("focus_bg").children("a").css("color","#093153");
}else if(url.indexOf("user") >= 0){
$(".usermsg").addClass("focus_bg").children("a").css("color","#093153");
}
});
</script>
//index.jsp部分
<body >
<%@ include file="/common/header.jsp"%> //调用公共的header.jsp
<div>1111111111111111111111111111111111111</div>
</div>