如何根据当前页面/url 设置 class="selected" ？

如何根据当前页面/url 设置 class="selected" ？

有 class = “selected” 取决于页面/ URL 是什么。这个概念非常重要，尤其是在为网站设计导航栏时，以便网站上的访问者知道他们在网站的哪个页面上

方法：根据当前页面/URL 选择 class="selected"：

• 编写您的 HTML 代码。
• 为所选类编写 CSS。
• 在 javascript 中，使用 location.href 查找页面的当前位置。
• 现在将所有 a 标签保存在一个变量中，让我们使用 document.querySelector函数说“项目”。
• 遍历项目并将其位置与当前页面 URL 进行比较。
• 如果 Items 位置与页面的当前位置匹配，则将当前的 a 标记类添加到选定的类。

句法：

const currentLocation = location.href

示例：此代码应粘贴在所有 4 个文件中。

HTML

  
    
      a {
        color: #000;
        text-decoration: none;
      }
  
      .nav {
        padding: 10px;
        border: solid 1px #c0c0c0;
        border-radius: 5px;
        float: left;
      }
      .nav li {
        list-style-type: none;
        float: left;
        margin: 0 10px;
      }
      .nav li a {
        text-align: center;
        width: 55px;
        float: left;
      }
      .nav li a.selected {
        background-color: green;
        color: #fff;
        font-weight: bold;
      }
    
  
  
  
    
      Home
      |
      GFG
      |
      About
      |
      Contact
    
  
  
    const currentLocation = location.href;
    const Items = document.querySelectorAll("a");
    const Length = Items.length;
  
    for (let i = 0; i < Items.length; i++) {
      if (Items[i].href === currentLocation) {
        Items[i].className = "selected";
      }
    }
  

输出：