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是一样的。