1、當鼠標移入后，菜單顯示成高亮；移出后恢復
2、在1的基礎上，單擊某個菜單項，該項保持高亮（頁面不刷新）
3、在1的基礎上，單擊某個菜單項，該項保持高亮（頁面刷新）
4、當鼠標移入后，改變菜單的背景圖片，與1效果類似
1、這是最基本的一步，基本上要求菜單高亮顯示的，這個需求會同時存在；這里我們用CSS來解決這個需求；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Menu Test</title>
</head>
<style>
.Pmenus, .Pmenus ul {margin:0;padding:0;}
.Pmenus li {
list-style:none;width:90px;height:25px;font-weight:bold;text-align:left;line-height:25px;margin:0;padding:0 0 2px 0;background:#AE359F;
}
.Pmenus li a {display:block;font-size:12px;font-family:Arial;text-decoration:none;}
.Pmenus li a:link, .Pmenus li a:visited {color:#EEEEEE;padding:0 3px;}
.Pmenus li a:hover {background: #F9B7E7;color:#AD1788;padding:0 3px;}
li.focusurl a {background: #F9B7E7;color:#AD1788;}
</style>
<body>
<div id="primarymenu" class="Pmenus"><ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> Hotel </a></li>
<li><a href="#"> Hotel Package </a></li>
<li><a href="#"> Promotion </a></li>
<li><a href="#"> My Booking </a></li>
<li><a href="#"> Help </a></li>
<li><a href="#"> Contact us </a></li>
<li><a href="#"> Log Out </a></li>
</ul></div>
</body>
</html>
2、好，現在可以看到，第一點需求所要求的效果已經達到了，下面我們來實現第二個需求；這個就需要JS來實現了，簡單一點，加入一段JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Menu Test</title>
</head>
<style>
.Pmenus, .Pmenus ul {margin:0;padding:0;}
.Pmenus li {
list-style:none;width:90px;height:25px;font-weight:bold;text-align:left;line-height:25px;margin:0;padding:0 0 2px 0;background:#AE359F;
}
.Pmenus li a {display:block;font-size:12px;font-family:Arial;text-decoration:none;}
.Pmenus li a:link, .Pmenus li a:visited {color:#EEEEEE;padding:0 3px;}
.Pmenus li a:hover {background: #F9B7E7;color:#AD1788;padding:0 3px;}
li.focusurl a {background: #F9B7E7;color:#AD1788;}
</style>
<script type="text/javascript">
var lastClick;
window.onload=function(){
var divObj = document.getElementById("primarymenu");
aList = divObj.getElementsByTagName("a");
var listCount = aList.length;
for (var i=0;i<listCount;i++){
aList[i].onclick = function(){
this.parentNode.className = "focusurl";
if ( lastClick && lastClick !=this)
lastClick.parentNode.className ="";
lastClick = this;
}
}
}
</script>
<body>
<div id="primarymenu" class="Pmenus"><ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> Hotel </a></li>
<li><a href="#"> Hotel Package </a></li>
<li><a href="#"> Promotion </a></li>
<li><a href="#"> My Booking </a></li>
<li><a href="#"> Help </a></li>
<li><a href="#"> Contact us </a></li>
<li><a href="#"> Log Out </a></li>
</ul></div>
</body>
</html>
3、OK，上面的頁面不刷新的情況，一旦頁面刷新，效果就沒有了，這時候怎么辦呢？沒關系，我們嘗試另外一段JS代碼來達到這個效果，雖然代碼有點長：
【這段代碼也是我在網上搜索而來，但是對其中一些代碼片段不敢茍同，因此做了修改；而且這段JS的擴展性不夠好，每次使用都必須根據實際情況進行修改】
【這段代碼只是做個示范，運行的話應該不會出現效果，實際的網站例子在5那邊有鏈接】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Menu Test</title>
</head>
<style>
.Pmenus, .Pmenus ul {margin:0;padding:0;}
.Pmenus li {
list-style:none;width:90px;height:25px;font-weight:bold;text-align:left;line-height:25px;margin:0;padding:0 0 2px 0;background:#AE359F;
}
.Pmenus li a {display:block;font-size:12px;font-family:Arial;text-decoration:none;}
.Pmenus li a:link, .Pmenus li a:visited {color:#EEEEEE;padding:0 3px;}
.Pmenus li a:hover {background: #F9B7E7;color:#AD1788;padding:0 3px;}
li.focusurl a {background: #F9B7E7;color:#AD1788;}
</style>
<script type="text/javascript">
var lastClick;
window.onload=function(){
var divObj = document.getElementById("primarymenu");
aList = divObj.getElementsByTagName("a");
var listCount = aList.length;
for (var i=0;i<listCount;i++){
aList[i].onclick = function(){
this.parentNode.className = "focusurl";
if ( lastClick && lastClick !=this)
lastClick.parentNode.className ="";
lastClick = this;
}
}
}
var tp;
var url = location.pathname+location.search;
var arr = new Array();
// 這里需要你輸入一些自己的URL
arr.push( BASE_URL);
arr.push( BASE_URL + "home" );
arr.push( BASE_URL + "hotel" );
arr.push( BASE_URL + "package" );
arr.push( BASE_URL + "promotion" );
arr.push( BASE_URL + "mybooking" );
arr.push( BASE_URL + "help" );
arr.push( BASE_URL + "contactus" );
arr.push( BASE_URL + "user/login" );
arr.push( BASE_URL + "logout" );
for(i=0;i<arr.length;i++) {
if(url.lastIndexOf(arr[ i ]) > -1) {
tp=i;
}
}
var dv = document.getElementById("primarymenu");
var lk = dv.getElementsByTagName("a");
var link_index;
for(i=0;i<arr.length;i++) {
// 注意這里，與參考的資料上不一樣，我做了改動【原先是獲取lk的長度】
if(i == tp) {
switch(i) {
case 0:
case 1:
link_index = 0;
break;
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
link_index = i - 1;
break;
case 8:
case 9:
link_index = 7;
break;
}
}
}
lk[ link_index ].style.fontWeight="bold";
lk[ link_index ].style.color="#AD1788";
lk[ link_index ].style.background="#F9B7E7";
lk[ link_index ].style.padding="0 3px";
lk[ link_index ].className="focusurl";
</script>
<body>
<div id="primarymenu" class="Pmenus"><ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> Hotel </a></li>
<li><a href="#"> Hotel Package </a></li>
<li><a href="#"> Promotion </a></li>
<li><a href="#"> My Booking </a></li>
<li><a href="#"> Help </a></li>
<li><a href="#"> Contact us </a></li>
<li><a href="#"> Log Out </a></li>
</ul></div>
</body>
</html>
posted on 2009-08-03 23:18
扭曲的鉛筆 閱讀(389)
評論(0) 編輯 收藏 所屬分類:
J2EE