如何显示页面用户在导航菜单栏中？

我正在创建一个静态网站。我想要显示当前标签页用户正在以不同颜色（其他正常导航菜单选项卡）查看。我如何在不使用任何服务器端脚本的情况下执行此操作？如何显示页面用户在导航菜单栏中？

在此先感谢。

来源

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

如何显示页面用户在导航菜单栏中？

回答

相关问题