如何顯示頁面用戶在導航菜單欄中？

我正在創建一個靜態網站。我想要顯示當前標籤頁用戶正在以不同顏色（其他正常導航菜單選項卡）查看。我如何在不使用任何服務器端腳本的情況下執行此操作？如何顯示頁面用戶在導航菜單欄中？

在此先感謝。

來源

2013-02-22 shriguru nayak

示例代碼將有助於@EnterJQ – 2013-02-22 11:35:52

你提到「服務器端腳本」，但是唯一的標籤是前端語言。你已經嘗試了什麼？您的主動導航菜單選項卡是否具有某種類別以區別於其他類別？你使用什麼服務器端語言？ – 2013-02-22 11:37:04

你可以使用javascript或jquery，但如果你能與我們分享你的代碼更好。 – 2013-02-22 11:37:07

它取決於NDS如何組織你的邏輯...例如，如果你有前端控制器，你會得到應由GET參數（page）來顯示當前頁面，您可以：

PHP

$current = $_GET['page']; 
print '<ul class="menu">'; 
while ($page = $pages->getNext()) { 
    $label = $page->getLabel(); 
    if ($page->getName() === $current) { 
     print '<li class="menu-item selected">' . $label . '</li>'; 
    } else { 
     print '<li class="menu-item">' . $label . '</li>'; 
    } 
} 
print '</ul>';

由於您會在腳本中看到我們打印不同類型的列表項，具體取決於它是否是當前頁面。如果這是當前頁面，我們的列表項目有類selected和menu-item，否則它只是一個菜單項。

如果你想要做的，從前端同樣的事情，你可以用下面的辦法：

的JavaScript

var menuItems = { 
     'info': { 
      'label': 'Info', 
      'id': 'info-item' 
     }, 
     'home': { 
      'label': 'Home', 
      'id': 'home-item' 
     } 
    }; 
    //... 
    function getCurrentPage() { 
     var str = window.location.search.replace('?', ''), 
      params = str.split('&'); 
     for (var i = 0; i < params.length; i += 1) { 
      var current = params[i].split('='); 
      if (current[0] === 'page') { 
       return current[1]; 
      } 
     } 
     return undefined; 
    } 
    //... 
    var page = getCurrentPage(); 
    clearCurrentPage(); 
    setCurrentPage(page); 

    //... 

    function setCurrentPage(page) { 
     var item = pages[page]; 
     document.getElementById(item.id).className += ' selected'; 
    } 

    function clearCurrentPage() { 
     var selected = document.getElementsByClassName('selected'); 
     for (var i = 0; i < selected.length; i += 1) { 
      selected[i].className = selected[i].className.replace(' selected', ''); 
     } 
    }

來源

2013-02-22 11:40:51

我知道我可以做到這一點。但是，我能從前端做到嗎？ – 2013-02-22 11:43:21

是的，我會再添加一個例子。我不明白你的問題... – 2013-02-22 11:44:03

我添加了一個示例代碼，它將做同樣的事情，但JavaScript。 – 2013-02-22 11:50:00

從你說的，你的網站是由3個頁面組成的：index.html，about.html，contact.html 和你在所有3頁上常用的導航是Home About Contact，菜單看起來像：

<ul> 
<li><a href="index.html">Home</a></li> 
<li><a href="about.html">About</a></li> 
<li><a href="contact.html">Contact</a></li> 
</ul>

index.html中你應該添加在第一個鏈接類=「活動」，在about.html關於鏈接上添加類=「活動」等

然後在你的CSS

然後文件define ul li a.active {background：yellow}

來源

2013-02-22 11:40:03

我創建一個靜態的網站。我想要顯示當前標籤頁用戶正在以不同顏色（其他正常導航菜單選項卡）查看。

充分利用li表示標籤類（例如class="tab current-page"）的成員。然後改變風格。

如何使用任何服務器端腳本執行此操作？

編輯HTML手動
使用預處理
就做客戶端用JS是比較location.href到可能的頁面生成HTML

來源

2013-02-22 11:44:18 Quentin

如何顯示頁面用戶在導航菜單欄中？

回答

相關問題