时间戳

首页 > 解决方案 > 使用 javascript 在菜单中突出显示当前页面

javascript - 使用 javascript 在菜单中突出显示当前页面

问题描述

以下代码运行良好。但是老师让我解释“if(menu!==null)”，我解释不了。他说这是强制性的，但我删除了它，它仍然有效。这是主页的示例。

function setBold() {
  var menu = document.getElementById('page').getAttribute("data-page");
  if (menu !== null) {
    document.getElementById(menu).className = "active";
  }
}
.active {
  font-weight: bold;
  font-size: 18px;
}
<body onload="setBold()" id="page" data-page="Home">
  <div class="menu">
    <a id="Home" href="">Home</a>
    <a id="About" href="">About My Cakes</a>
    <a id="Find" href="">Find Maria's Coffe</a>
  </div>

  <body>

标签： javascripthtmlcss

解决方案

添加此if(menu!==null)条件的原因如下：

  1. 可能会出现没有data-pagein的情况body。
  2. 脚本可能会在渲染主体之前运行，如果我们不在标签中使用defer属性，就会发生这种情况。<script>

<script defer="defer"> 究竟是如何工作的？

推荐阅读