網站導航

我正在製作HTML，CSS和PHP網站。我在頁面頂部有一個導航，當你將鼠標懸停在按鈕上時，它們亮起。網站導航

現在，當您單擊某個按鈕並轉到該特定頁面時，我希望該頁面的按鈕被點亮，表明您正在該頁面上。我會如何去做這件事？在每個頁面上定義一個變量，然後在菜單中檢查它是不可能的，因爲我在該網站上也有一個論壇，這就需要我在每個頁面上定義一個變量。

編輯

我設法解決我的問題。事實證明，我可以定義頁面，對於論壇，我可以在論壇使用的設置文件中執行相同的操作。

在我的導航，我只是檢查當前頁面是什麼：

<li id="news"><a <? if(PAGE == "INDEX") print 'class="active"'; ?> href="/">News</a></li>

來源

2012-06-28 Lazze

傳遞參數如何？ –

當你導航到另一個頁面時，你的網址（查詢字符串）是什麼？ – WolvDev

該頁面應該如何知道哪個按鈕點亮？通常的做法是將類屬性添加到當前頁面，但是您特別排除了這些解決方案。你有什麼其他獨特的屬性可以指導代碼到哪個按鈕減輕？ –

添加一個類（或ID）到body標籤，就像這樣：

<body class="Page1">...</body>

然後，在你的CSS你可以這樣說：

.Page1 menu li, menu li:hover {...}

來源

2012-06-28 13:03:24 Quantastical

我不是s如何檢查PHP中的當前頁面 - 儘管如此，這將是理想的。

function highlightPage(id){ 
    //make sure DOM methods are understood 
    if(!document.getElementsByTagName) return false; 
    if(!document.getElementById) return false; 
    if(!document.getElementById(id)) return false; 
    var nav = document.getElementById(id); 
    var links = nav.getElementsByTagName('a'); 
    for (var i=0; i < links.length; i++){ 
     var linkurl = links[i].getAttribute('href'); 
     var currenturl = window.location.href; 
     //indexOf will return -1 on non-matches, so we're checking for a positive match 
     if (currenturl.indexOf(linkurl) != -1) { 
      links[i].className = "here"; 
      var linktext = links[i].lastChild.nodeValue.toLowerCase(); 
      document.body.setAttribute("id",linktext); 
     } 
    } 
}

，並在頁面的加載加載功能：

function addLoadEvent(func){ 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
     window.onload = func; 
    } else { 
     window.onload = function(){ 
      oldonload(); 
      func(); 
     } 
    } 
} 

addLoadEvent(function(){ 
    highlightPage('navigation'); 
    });

如果要依賴於JavaScript，雖然，我已經成功地過去使用此功能這假定您的導航的ID爲「導航」，但您可以將其更改爲任何您想要的。該功能簡單地將一類「here」附加到當前導航項目。這個腳本來from Jeremy Keith's "DOM Scripting"。

來源

2012-06-28 13:05:36 chipcullen

回答

相關問題