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

Question

<分区>

Answer 1

这取决于你如何组织你的逻辑......例如，如果你有前端 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', '');
      }
   }