导航条的高亮显示

最新推荐文章于 2022-11-26 10:13:46 发布

iteye_137

最新推荐文章于 2022-11-26 10:13:46 发布

阅读量822

点赞数

分类专栏： JavaScript 文章标签： wicket JavaScript CSS JSP HTML ViewUI

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1. 导航条的html代码：

<a href="#" id="home_li"  wicket:id="IndexPage">Home</a>
<a href="#" id="userManage_li"  wicket:id="UserListPage">User Manage</a>
<a href="#" id="addUser_li"  wicket:id="AddUserPage">Add User</a>
<a href="#" id="roleManage_li"  wicket:id="RolePage">Role Manage</a>
<a href="#" id="upload_li"  wicket:id="upload">Upload</a>
<a href="#" id="report_li" wicket:id="report">Report</a>
<a href="#" wicket:id="signout" οnclick="JavaScript:if(confirm('Are your sure to Sign Out?')){return true;}else{return false;}">Sign Out</a>

2. JS代码：

var lis = new Array('home_li','userManage_li','addUser_li','roleManage_li','upload_li','report_li');
function viewNavTab(id){
	for(var i=0;i<lis.length;i++){
		var lisValue = document.getElementById(lis[i]);
		var idValue = id+'_li';
		if(lisValue){
			if(idValue == lis[i]){
				lisValue.className = "active";
			}else{
				lisValue.className = "";
			}
		}
	}
}

3. 哪个页面要用到它就在加载的时候调用它就是了。它是在页面"加载"时调用。

例如：ViewReportPage.html

<script type="text/javascript" wicket:id="navJs"></script>
<body οnlοad="JavaScript:viewNavTab('report');">

因为本人用的是wicket所以写法不一样，如果是普通的html就用<script type="text/javascript" src="../js/common.js" ></script>

4. 上面1和2就可以搞定啦，3和4是为了说明在什么时候用它。这里是在"点击"某个导航菜单时调用。

<a href="#" id="home_li" οnclick="JavaScript:viewNavTab('home');"  wicket:id="IndexPage">Home</a>
<a href="#" id="userManage_li" οnclick="JavaScript:viewNavTab('userManage');"  wicket:id="UserListPage">User Manage</a>
<a href="#" id="addUser_li" οnclick="JavaScript:viewNavTab('addUser');"  wicket:id="AddUserPage">Add User</a>
<a href="#" id="roleManage_li" οnclick="JavaScript:viewNavTab('roleManage');"  wicket:id="RolePage">Role Manage</a>
<a href="#" id="upload_li" οnclick="JavaScript:viewNavTab('upload');"  wicket:id="upload">Upload</a>
<a href="#" id="report_li" οnclick="JavaScript:viewNavTab('report');" wicket:id="report">Report</a>
<a href="#" wicket:id="signout" οnclick="JavaScript:if(confirm('Are your sure to Sign Out?')){return true;}else{return false;}">Sign Out</a>

一、前提：在一个页面中的不同小导航菜单。
1.点击后会刷新整个页面，所以必须在body的onlaod事件中写代码。
2.index.jsp的导航菜单
//上面的导航菜单
<div class="pagination">
   <ul>
 <li ><a href="Pornstars!actorListBySingleWord.action?word=AG" id="sort_AG" class="currentpage">A-G</a></li>
 <li ><a href="Pornstars!actorListBySingleWord.action?word=HN" id="sort_HN">H-N</a></li>
 <li ><a href="Pornstars!actorListBySingleWord.action?word=OT" id="sort_OT">O-T</a></li>
 <li ><a href="Pornstars!actorListBySingleWord.action?word=UZ" id="sort_UZ">U-Z</a></li>
   </ul>
</div> 
//下面的导航菜单(注意区别是id="sort_AG1"，多了个‘1’)
其实这个id="sort_AG" class="currentpage" 应该放在<li>里面的。不过放到<a>里面也可以。
这里的class="currentpage"的样式已经在CSS里面设置好了，所以在后面的common.js里面可以直接用它就是了。
<div class="pagination">
   <ul>
 <li ><a href="Pornstars!actorListBySingleWord.action?word=AG" id="sort_AG1" class="currentpage">A-G</a></li>
 <li ><a href="Pornstars!actorListBySingleWord.action?word=HN" id="sort_HN1">H-N</a></li>
 <li ><a href="Pornstars!actorListBySingleWord.action?word=OT" id="sort_OT1">O-T</a></li>
 <li ><a href="Pornstars!actorListBySingleWord.action?word=UZ" id="sort_UZ1">U-Z</a></li>
   </ul>
</div> 
3.index.jsp的body事件
<%
  String wordValue = request.getParameter("word");
%>
这里的wordValue的值在前面已经定义好了。所以这里才可以用。
<body οnlοad="JavaScript:changeLink('sort_<%=wordValue %>');">
4.common.js
//view nav inf
function changeLink(name){
 var lis = new Array('sort_AG','sort_HN','sort_OT','sort_UZ','sort_AG1','sort_HN1','sort_OT1','sort_UZ1');
 if(name == "sort_null" || name == "sort_" ){
  name = 'sort_AG';
 }
 for (var i=0; i < lis.length; i++){
  if (lis[i].indexOf(name,0) >= 0){
   document.getElementById(lis[i]).className = "currentpage";
  } else {
   document.getElementById(lis[i]).className = "";
  }
 }
}
5.经过上面的四个步骤就可以搞定了。

二、前提是总项目的导航菜单，这时候每个导航菜单就对应自己的页面了。
1.可以在body的onlaod事件中写代码。也可以在onclick事件中写代码。要看具体的业务了。
2.每个页面中有ViewReportPage.html
  <body οnlοad="JavaScript:viewNavTab('report');">
  这里的参数report就是写死了，每个页面对应自己的参数就是了，这样还更简单些不用request来获取。
3.总的导航菜单
<a href="#" id="home_li" wicket:id="IndexPage">Home</a>
<a href="#" id="userManage_li" wicket:id="UserListPage">User Manage</a>
<a href="#" id="roleManage_li" wicket:id="RolePage">Role Manage</a>
<a href="#" id="app_li" wicket:id="AppListPage">Application</a>
<a href="#" id="upload_li" wicket:id="upload">Upload</a>
<a href="#" id="report_li" wicket:id="report">Report</a>
<a href="#" wicket:id="signout" οnclick="JavaScript:if(confirm('Are your sure to Sign Out?')){return true;}else{return false;}">Sign Out</a>
只要一点击导航菜单它就会跳到相应的页面中例如：ViewReportPage.html,这个页面中有body的onload事件。
4.common.js
//view nav inf
var lis = new Array('home_li','userManage_li','app_li','roleManage_li','upload_li','report_li');
function viewNavTab(id){
 for(var i=0;i<lis.length;i++){
  var lisValue = document.getElementById(lis[i]);
  var idValue = id+'_li';
  if(lisValue){
   if(idValue == lis[i]){
    lisValue.className = "active";
   }else{
    lisValue.className = "";
   }
  }
 }
}
这里的active样式已经在CSS里面定义好了，和上面的currentpage是一样的。

iteye_137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航条的高亮显示

1. 导航条的html代码：&lt;a href="#" id="home_li" wicket:id="IndexPage"&gt;Home&lt;/a&gt;&lt;a href="#" id="userManage_li" wicket:id="UserListPage"&gt;User Manage&lt;/a&a
复制链接

扫一扫

专栏目录