Question

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

提前致谢。

Answer 1

根据您的说法，您的网站由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中你应该在第一个链接上添加class =“active”，在about.html上添加class =“active”等等

然后在你的css文件中定义ul li a.active {background：yellow}

Answer 2

这取决于你如何组织你的逻辑...例如，如果你有Front Controller并且你得到了应该由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', '');
      }
   }

Answer 3

我正在创建一个静态网站。我想显示当前标签用户正在以不同颜色查看（其他常规导航菜单标签）。

使代表该标签的li成为某个类的成员（例如class="tab current-page"）。然后用不同的方式设计它。

如何使用任何服务器端脚本执行此操作？

手动编辑HTML
使用预处理器生成HTML
使用JS将客户端与location.href与可能的页面进行比较

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

3 个答案: