导航条的高亮显示

duyunfengsolo

浏览: 1053850 次
性别:
来自: 广州

最近访客更多访客>>

Carsymor

muyuan

qq705570553

邱理军

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

wicket JavaScript CSS JSP HTML

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" onclick="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 onload="JavaScript:viewNavTab('report');">

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

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

<a href="#" id="home_li" onclick="JavaScript:viewNavTab('home');"  wicket:id="IndexPage">Home</a>
<a href="#" id="userManage_li" onclick="JavaScript:viewNavTab('userManage');"  wicket:id="UserListPage">User Manage</a>
<a href="#" id="addUser_li" onclick="JavaScript:viewNavTab('addUser');"  wicket:id="AddUserPage">Add User</a>
<a href="#" id="roleManage_li" onclick="JavaScript:viewNavTab('roleManage');"  wicket:id="RolePage">Role Manage</a>
<a href="#" id="upload_li" onclick="JavaScript:viewNavTab('upload');"  wicket:id="upload">Upload</a>
<a href="#" id="report_li" onclick="JavaScript:viewNavTab('report');" wicket:id="report">Report</a>
<a href="#" wicket:id="signout" onclick="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 onload="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 onload="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" onclick="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是一样的。

分享到：

Java Excel API jxl入门及jxl.jar下载(jav ... | 判断小数点位数不超过2位的JS代码和在删除 ...

2009-09-29 17:09
浏览 3172
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

导航条的高亮显示

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

导航条的高亮显示

评论

发表评论

相关推荐

JS窗口改变触发事件

js动态生成表格，然后清空

Javascript刷新页面的几种方法

JS客户端验证

form表单提交2次的原因

如何判断年龄大于18岁

java IE火狐兼容添加到收藏夹 IE7浏览器状态栏报错,"找不到元素"或者"没有权限"

JS来获取页面的URL top.location.href 和 window.location.href

Dom的“事件类型”和“事件监听”

JS如何关闭flash代码

document.documentElement.scrollTop

JQuery 模式对话框DIV

JQuery 随鼠标滚动条滚动的div

JS中定义变量i自增长

用iframe来实现一个页面嵌套另一个页面

(全选)多选按钮的JS实现 单选按钮

JS创建数组的方法

JS和JSP的共同使用(JS的字符串定义、null值的判断、变量的定义)

JS如何传参的问题

CMS模板发布中的div框

最近访客更多访客>>

(全选)多选按钮的JS实现单选按钮