淺談不用Cookie實(shí)現(xiàn)高亮Javascript菜單效果

淺談不用Cookie實(shí)現(xiàn)高亮Javascript菜單效果

ID：38177245

大?。?0.50 KB

頁數(shù)：5頁

時(shí)間：2019-05-24

淺談不用Cookie實(shí)現(xiàn)高亮Javascript菜單效果_第1頁
淺談不用Cookie實(shí)現(xiàn)高亮Javascript菜單效果_第2頁
淺談不用Cookie實(shí)現(xiàn)高亮Javascript菜單效果_第3頁
淺談不用Cookie實(shí)現(xiàn)高亮Javascript菜單效果_第4頁
淺談不用Cookie實(shí)現(xiàn)高亮Javascript菜單效果_第5頁
資源描述：

《淺談不用Cookie實(shí)現(xiàn)高亮Javascript菜單效果》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、淺談不用Cookie實(shí)現(xiàn)高亮Javascript菜單效果筆者經(jīng)常采用的高亮Javascript菜單效果設(shè)計(jì)方式，一般的網(wǎng)頁至少都有兩級(jí)菜單，第一個(gè)是頂部的總導(dǎo)航條菜單，另一個(gè)是左側(cè)的分類導(dǎo)航菜單。一般要求在一級(jí)菜單高亮下二級(jí)菜單也能記錄當(dāng)前狀態(tài)。對(duì)于一個(gè)包含頂部菜單的頁頭區(qū)域如果固定不變的，也就是它不用每次都重新加載，這種情況下用純CSS或JS方式可以很容易地實(shí)現(xiàn)，但今天我要談的不是這種，今天說的是一級(jí)菜單和二級(jí)菜單在每個(gè)頁面中都是動(dòng)態(tài)加載的，也就是它們是作為用戶控件的方式載入的。這種情況下要想高亮Javascript菜單效果

2、的狀態(tài)是一件比較困難的事情。當(dāng)然，你可能會(huì)說，用cookie可以記錄每個(gè)頁面加載時(shí)上次記錄的高亮狀態(tài)，是的，它確實(shí)可以記錄，但是這種方式在一些復(fù)雜的包含許多子頁面的應(yīng)用中，會(huì)給用戶造成許多困擾和麻煩。比如在cookie生存周期內(nèi)，重新打開這個(gè)項(xiàng)目時(shí)，此時(shí)cookie的生存周期還沒有完全結(jié)束，它還記錄著上次保存的狀態(tài)，而這時(shí)頁面地址已經(jīng)發(fā)生了變化，那么當(dāng)前高亮的菜單所指向的就不是用戶所希望看到的頁面。實(shí)踐證明，這個(gè)cookie的生存周期無論你設(shè)置多長(zhǎng)都不能完美解決用戶惡意刷新頁面的狀況。這確實(shí)是一件糟糕的事情！那么有沒有一種較好

3、的辦法來解決這種狀況呢？答案是有的。我們知道要解決這個(gè)問題，最理想的辦法是在每個(gè)頁面加載時(shí)，根據(jù)頁面的url地址顯式地設(shè)置當(dāng)前菜單的高亮樣式。這能完美地解決此類問題，并且這種方式無論用戶如何惡意點(diǎn)擊刷新按鈕，高亮狀態(tài)依舊保持不變。知道了原理，要實(shí)現(xiàn)起來就容易多了。【結(jié)構(gòu)層】一級(jí)菜單結(jié)構(gòu)層：1.?2.??

  • 首頁a>li>?????????????????3.??
  • 服

    4、裝用品a>li>?4.??

  • 家居用品a>li>?????????????5.??
  • 化妝用品a>li>?????6.ul>?可以看到在這個(gè)一級(jí)菜單中，其鏈接地址一般是沒有參數(shù)值的。二級(jí)菜單的結(jié)構(gòu)層：7./*一級(jí)菜單的三種樣式設(shè)置*/?1.#menu?li?a.normal{background:#fff;}//普通樣式

    5、?2.#menu?li?a.over{background:#00ff00;}?//翻滾樣式?3.#menu?li?a.cur{background:#ff0000;color:#fff;}?//高亮樣式?4./*二級(jí)菜單的三種樣式設(shè)置*/?5.#othermenu?li?a.normal{background:#fff;}?//普通樣式?6.#othermenu?li?a.over{background:#AA7F00;color:#fff;}?//翻滾樣式?7.#othermenu?li?a.cur{background:

    6、#7F0000;color:#fff;}?//高亮樣式?與一級(jí)菜單不同的是，我們將二級(jí)菜單中的鏈接地址加入兩個(gè)參數(shù)值，pId參數(shù)指向的是頂部一級(jí)菜單的的序號(hào)，而sId則是菜單自己的順序號(hào)。我們將這兩個(gè)菜單的總?cè)萜鱱l都設(shè)置了兩個(gè)不同中的ID，它們需要在JS中調(diào)用，所以千萬不能少?！緲邮綄印筷P(guān)于樣式，其實(shí)都沒有什么特別的地方，你可以隨心所意地設(shè)置成你想要的樣式，只是需要注意的地方是，我們需要單獨(dú)設(shè)置高亮Javascript菜單效果的三種狀態(tài)樣式，以供JS動(dòng)態(tài)調(diào)用。8./*一級(jí)菜單的三種樣式設(shè)置*/?9.#menu?li?a.no

    7、rmal{background:#fff;}//普通樣式?10.#menu?li?a.over{background:#00ff00;}?//翻滾樣式?11.#menu?li?a.cur{background:#ff0000;color:#fff;}?//高亮樣式?12./*二級(jí)菜單的三種樣式設(shè)置*/?13.#othermenu?li?a.normal{background:#fff;}?//普通樣式?14.#othermenu?li?a.over{background:#AA7F00;color:#fff;}?//翻滾樣式?

    8、15.#othermenu?li?a.cur{background:#7F0000;color:#fff;}?//高亮樣式?【行為層】因?yàn)橐谛袨閷又锌刂撇藛蔚娜N狀態(tài)，所以對(duì)于A鏈接標(biāo)簽，我們就不使用hover偽類來達(dá)到菜單的三種動(dòng)態(tài)行為了，我們可以用onmouseover

    • 當(dāng)前文檔最多預(yù)覽五頁，下載文檔查看全文

    此文檔下載收益歸作者所有

    當(dāng)前文檔最多預(yù)覽五頁，下載文檔查看全文
    溫馨提示：
    1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫的文件，查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常，文件下載后無此問題，請(qǐng)放心下載。
    2. 本文檔由用戶上傳，版權(quán)歸屬用戶，天天文庫負(fù)責(zé)整理代發(fā)布。如果您對(duì)本文檔版權(quán)有爭(zhēng)議請(qǐng)及時(shí)聯(lián)系客服。
    3. 下載前請(qǐng)仔細(xì)閱讀文檔內(nèi)容，確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載，若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
    4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無法下載或下載錯(cuò)誤，付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。