css設置導航在新頁面選中效果失效的解決方法

CSS設置導航時,點擊後進入新頁面,選中的菜單效果設置問題的解決方法。asp.net母板頁面導航當前菜單選中狀態特效的處理辦法。

工具/原料

HTML及CSS設計工具。

方法/步驟

在母板頁或框架頁的導航代碼:

<ul id="navul">                <li><a id="a0" href="/Default.aspx" title="首頁">首頁</a></li>                <li><a id="a1" href="/Views/Taobao/taskCenter.aspx" title="淘寶專區">淘寶專區</a></li>                <li><a id="a2" href="#" title="拍拍專區">拍拍專區</a></li>                <li><a id="a3" href="#" title="噹噹專區">噹噹專區</a></li>                <li><a id="a4" href="/Views/Pool/expressPool.aspx" title="快遞單">快遞單</a></li>                <li><a id="a5" href="/Views/User/userCenter.aspx" title="個人中心">個人中心</a></li>                <li><a id="a6" href="/Views/custService.aspx" title="客服中心">客服中心</a></li>            </ul>

註:申明規律的ID值。

在新頁面,如Default.aspx內最底端,放置同樣規則的DIV塊。如:<div id="m5" style="display:none;visibility:hidden;width:0px;height:0px;" />,如果是子母板,就放至子母板的最底端。

引入外部js代碼的文件或嵌入js代碼:

window.onload = function () {    for (var i = 0; i <= 7; i++) {        var mark=document.getElementById("m"+i);        if (mark != null) {            var link = document.getElementById("a" + i);            document.getElementById("a" + i).className = "curstyle";        }    }}

註:這樣,當你放置了m幾的div.就證明這個頁面屬於第幾個導航的頁面。放置了m1就證明這是第二項菜單的頁面,就將a2,即「拍拍專區」,用curstyle(選中樣式)進行設置。放在母板里,從該母板派生出來的頁面就都被置為同樣的高亮選中樣式了。

原理解釋:通過查詢m標誌,還設置相應的a標記樣式。查詢到m1,就證明此頁面被您歸為a1的導航。就可以設置a1為當前導航的高亮樣式。

如果覺得幫您解決了一塊難啃的硬骨頭,何不抽空來光顧一下我的網店:http://shop.paipai.com/2442971491,買不買麼,就看您有沒有中意的產品了!祝您生活愉快!如有疑問,可以QQ聯繫,號碼:2442971491.

注意事項

一個頁面最好只放置一個相應的Id為m+數字的div塊。

樣式不懂的,可以先學習CSS噢。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場