最近公司在做一個項目，其中一塊頭部的菜單導(dǎo)航區(qū)，要求實現(xiàn)進入相關(guān)頁面后上面的導(dǎo)航菜單圖片也需變換．而這個對于靜態(tài)頁面或者用框架或iframe的來說是很容易實現(xiàn)的．而我們是利用include來包含進的這個top.asp．雖然可以在那個圖片菜單上定義onclick的動作屬性．但是只要一跳轉(zhuǎn)頁面，則這個onclick動作就沒用了．因為top.asp被重新加載了．如果要解決這個問題，只能是在頁面加載時能讀取一個全局的變量，相對于瀏覽器的全局變量，通過這個變量的值來判斷應(yīng)該如何顯示這個導(dǎo)航菜單．于是也便有了本文．
我想到的解決方法有兩種：
１．利用cookies或session，在每個頁面加載時寫一個cookies或session變量，這個看似能很好的解決問題．但是卻出現(xiàn)了一個問題．那就是如果用戶禁止了cookies，則這個效果將無法實現(xiàn)，永遠只是顯示默認效果．所以我放棄這種做法
２．利用history或navigator來建立這么一個相對于瀏覽器的變量．只要我瀏覽器沒關(guān)，則這個變量就會持續(xù)存在．這樣就達到了我們想要的效果．我也是用這種方法來解決的．下面是具體實現(xiàn)部分．
|
<script type="text/JavaScript">
<!--
function foc(){
document.getElementById("searchkey").focus();
} //這是做搜索時一個函數(shù)與本文無關(guān)
function init(){ //初始化函數(shù)
if (history.dmenu){}else
{
history.dmenu=1;
}
//如果history.dmenu沒有定義則設(shè)置為１即顯示首頁按扭的效果
switch(history.dmenu){
case 1:
{
//alert(history.dmenu);
document.getElementById("d_id1").src="/images/anB1.gif";
document.getElementById("d_id2").src="/images/anB2.gif";
document.getElementById("d_id3").src="/images/anB3.gif";
document.getElementById("d_id4").src="/images/anB4.gif";
document.getElementById("d_id5").src="/images/anB5.gif";
document.getElementById("d_id6").src="/images/anB6.gif";
break;}
case 2:
{
//alert(history.dmenu);
document.getElementById("d_id1").src="/images/anB11.gif";
document.getElementById("d_id2").src="/images/anB22.gif";
document.getElementById("d_id3").src="/images/anB3.gif";
document.getElementById("d_id4").src="/images/anB4.gif";
document.getElementById("d_id5").src="/images/anB5.gif";
document.getElementById("d_id6").src="/images/anB6.gif";
break;
}
case 3:
{
document.getElementById("d_id1").src="/images/anB11.gif";
document.getElementById("d_id2").src="/images/anB2.gif";
document.getElementById("d_id3").src="/images/anB33.gif";
document.getElementById("d_id4").src="/images/anB4.gif";
document.getElementById("d_id5").src="/images/anB5.gif";
document.getElementById("d_id6").src="/images/anB6.gif";
break;
}
case 4:
{
document.getElementById("d_id1").src="/images/anB11.gif";
document.getElementById("d_id2").src="/images/anB2.gif";
document.getElementById("d_id3").src="/images/anB3.gif";
document.getElementById("d_id4").src="/images/anB44.gif";
document.getElementById("d_id5").src="/images/anB5.gif";
document.getElementById("d_id6").src="/images/anB6.gif";
break;
}
case 5:
{
document.getElementById("d_id1").src="/images/anB11.gif";
document.getElementById("d_id2").src="/images/anB2.gif";
document.getElementById("d_id3").src="/images/anB3.gif";
document.getElementById("d_id4").src="/images/anB4.gif";
document.getElementById("d_id5").src="/images/anB55.gif";
document.getElementById("d_id6").src="/images/anB6.gif";
break;
}
case 6:
{
document.getElementById("d_id1").src="/images/anB11.gif";
document.getElementById("d_id2").src="/images/anB2.gif";
document.getElementById("d_id3").src="/images/anB3.gif";
document.getElementById("d_id4").src="/images/anB4.gif";
document.getElementById("d_id5").src="/images/anB5.gif";
document.getElementById("d_id6").src="/images/anB66.gif";
break;
}
}
}
//上面是具體的判斷那個變量然后據(jù)變量的值來進行圖片的變換從而達到我們要的效果．
function menushow(d_id){
switch(d_id){
case 1:
history.dmenu=1;
break;
case 2:
history.dmenu=2;
break;
case 3:
history.dmenu=3;
break;
case 4:
history.dmenu=4;
break;
case 5:
history.dmenu=5;
break;
case 6:
history.dmenu=6;
break;
}
}
//按下相關(guān)圖片按鈕后設(shè)置history.dmenu為相應(yīng)的值從而在頁面加載時能根據(jù)這個值來進行圖片的變換
//-->
</script>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="57" colspan="4"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="394" height="57" rowspan="2"><img src="/images/LOGO.gif" width="394" height="57" /></td>
<td width="134" height="43"> </td>
<td width="129" align="right" valign="middle"><a href="#"><img src="/images/anA1.gif" width="114" height="26" border="0" /></a></td>
<td width="97" align="right" valign="middle"><a href="#"><img src="/images/anA2.gif" width="78" height="26" border="0" /></a></td>
<td width="100" align="right" valign="middle"><strong><a href="#"><img src="/images/anA3.gif" width="75" height="26" border="0" /></a></strong></td>
<td width="92" align="right" valign="middle"><a href="#"><img src="/images/anA4.gif" width="70" height="26" border="0" /></a></td>
<td width="14" align="right" valign="middle"> </td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="104"><a href="/"><img src="/images/anB1.gif" name="d_id1" width="103" height="28" border="0" id="d_id1" onClick="menushow(1)"/></a></td>
<td width="104" height="28"><a href="/order/"><img src="/images/anB2.gif" name="d_id2" width="104" height="28" / border="0" id="d_id2" onClick="menushow(2)"></a></td>
<td width="104"><a href="/news/"><img src="/images/anB3.gif" name="d_id3" width="104" height="28" border="0" id="d_id3" onClick="menushow(3)"/></a></td>
<td width="104"><a href="/law/"><img src="/images/anB6.gif" name="d_id4" width="104" height="28" border="0" id="d_id4" onClick="menushow(4)"/></a></td>
<td width="104"><a href="/exhibit/"><img src="/images/anB4.gif" name="d_id5" width="104" height="28" border="0" id="d_id5" onClick="menushow(5)"/></a></td>
<td width="104"><a href="/company/"><img src="/images/anB5.gif" name="d_id6" width="104" height="28" border="0" id="d_id6" onClick="menushow(6)"/></a></td>
<td width="432" background="/images/bjB1.gif"> </td>
<td width="4"><img src="/images/tuB1.gif" width="4" height="28" /></td>
</tr>
<tr>
<td height="59" colspan="7"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="/images/bjB2.gif" class="toptable">
<tr>
<td width="17%" height="58" align="center"> </td>
<td width="5%" align="center"><img src="/images/tuB4.gif" width="30" height="30" /></td>
<td width="4%" align="center"><span class="STYLE1"></span></td>
<td width="31%" align="center"><input name="searchkey" type="text" id="searchkey" size="40" /></td>
<td width="8%" align="center"><select name="select">
<option value="0">Please Select</option>
<option value="1">News</option>
<option value="2">Exhibit</option>
<option value="3">Company</option>
</select></td>
<td width="9%" align="center"><a href="#"><img src="/images/tuB5.gif" width="74" height="24" border="0" /></a></td>
<td width="10%" align="center" valign="middle"><img src="/images/tuB6.gif" width="3" height="5" /> <a href="javascript:void(0)" class="kfs" onClick="foc()">站內(nèi)搜索</a></td>
<td width="16%"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td width="6"><img src="/images/tuB2.gif" width="6" height="29" /></td>
<td width="46" align="center" background="/images/bjB3.gif"><strong>公告</strong></td>
<td width="904" background="/images/bjB3.gif"><a href="#" class="lan"> to trash cans, find the Public Utility Equipment </a><span class="STYLE2">new!</span><br /></td>
<td width="6" ><img src="/images/tuB3.gif" width="6" height="29" /></td>
</tr>
</table>
<script language="javascript">
init(); //這里注意一定要寫在這里，要不然這個初始化函數(shù)就會報錯說找不到對像
</script>
|
這種的效果如下：
先看首頁：
再看按下訂單查看按鈕后的效果:我用的觸發(fā)腳本是在上面代碼中的onclick="menushow(2)"即傳遞一個2做為實參，從而設(shè)置history.dmenu=2這樣在頁面刷新加載時就會判斷出當(dāng)前狀態(tài)了．因為這個變量是相對于瀏覽器的．效果如下:
|
今天測試時發(fā)現(xiàn)了一個問題，得用上面寫的方法時對ＩＥ不支持，在火狐上沒有問題，所以對程序進行了下小修改．過程是這樣的．對于ＩＥ瀏覽器使用session來判斷，每按一個按鈕時就寫一個session("dmenu")為相應(yīng)的值，然后把這個值寫在頁面的一個隱藏域里，然后在頁面初始化時判斷是使用的什么類型瀏覽器，如果是ＩＥ的就執(zhí)行通過session來判斷的函數(shù)，而這個session則是通過獲取那個隱藏域里的值，而如果是非ＩＥ瀏覽器就運用上面我昨天寫的也就是上面的init函數(shù)來進行．判斷代碼如下：
<script language="javascript">
if(navigator.userAgent.indexOf("MSIE")>0){
init2();//是ＩＥ瀏覽器就執(zhí)行這個
}else{
init();
//否則執(zhí)行這個
}
</script>
如此一來就完美的解決了這個問題．也許有朋友會說用session就可以了，但經(jīng)過我的實驗是用session火狐的根本不認，我也不知道什么原因，所以只好用我這個方法了．如果你有好方法請告訴我． |
代碼經(jīng)過精簡后的仿QQ折疊菜單，以前發(fā)過的，不過這個是經(jīng)過幾輪代碼精簡后的一個版本，而且在各瀏覽器下的表現(xiàn)也很不錯，兼容性沒出問題。2010-09-09
本節(jié)主要介紹用dtree來實現(xiàn)樹形的菜單，需要的朋友可以參考下。2011-10-10
JavaScript配合CSS制作一個能自動 切換的網(wǎng)頁選項卡,每隔一段時間,它就自動切換選項卡列表和標(biāo)題,時間自設(shè).2009-10-10
一個簡單的js無限級折疊菜單，這里只列出JS版本的，JQUERY版本的可以到作者發(fā)的帖子上看，權(quán)當(dāng)拋磚引玉了。2011-03-03
仿126中的綠色tab切換效果，比較漂亮2008-09-09
JavaScript結(jié)合 CSS完成QQ聊天面板菜單的功能，點擊某一項菜單后，開始展開，再次點擊則關(guān)閉，支持多級（三級），代碼中預(yù)留有用于修飾的背景圖像代碼，請根據(jù)你的實際需要補全，應(yīng)該是非常實用的。2009-10-10
發(fā)了個韓國網(wǎng)站（www.firstkids.co.kr）給我，讓我用CSS寫一個類似這個網(wǎng)站的導(dǎo)航欄效果。思路是：背景圖像定位！2009-10-10
這個菜單是從百度推廣扒下來的，去掉了CSS文件，僅保留核心的Js動作，點擊每一項的標(biāo)題，可展開二級的子項菜單，想用的朋友自己添加樣式，這樣更能符合你網(wǎng)站的主題。2010-03-03
JS+CSS共同結(jié)合完成的雙級下拉菜單，符合WEB標(biāo)準(zhǔn)，可作為一個標(biāo)準(zhǔn)的實例來掌握。2009-12-12