0

我正在创建一个静态网站。我想显示当前标签用户正在以不同的颜色查看（除了正常的导航菜单标签）。如何在不使用任何服务器端脚本的情况下做到这一点？

提前致谢。

4

3 回答 3

0

这取决于你如何组织你的逻辑......例如，如果你有 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', '');
      }
   }
于 2013-02-22T11:40:51.530 回答
0

根据您的说法，您的网站由 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 中，在 about 链接上添加 class="active" 等等

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

于 2013-02-22T11:40:03.160 回答
0

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

使li代表该选项卡的类的成员（例如class="tab current-page"）。然后风格不同。

如何使用任何服务器端脚本来做到这一点？

  • 手动编辑 HTML
  • 使用预处理器生成 HTML
  • 用 JS 做客户端，与location.href可能的页面进行比较
于 2013-02-22T11:44:18.517 回答