具有自定义 html 元素的活动导航项-解网

问：

我正在使用 html 自定义元素构建一个导航组件，如下所示：

[HTML全

<app-navbar></app-navbar>
<template>
<style>
    ul {
        display: flex;
        list-style: none;
        gap: 20px;
    }
    a {
        padding: 10px;
        text-decoration: none;
    }
    .active {
        color: white;
        background-color: red;
    }
</style>
<nav>
    <ul>
        <li><a href="/page-one.html">Nav item 1</a></li>
        <li><a href="/page-two.html">Nav item 2</a></li>
        <li><a href="/page-three.html">Nav item 3</a></li>
    </ul>
</nav>

JS公司

class AppNavBar extends HTMLElement { 
 constructor() { 
  super();
  this.attachShadow({ mode: 'open' });
  const template = document.querySelector('template');
  this.shadowRoot.appendChild(template.content.cloneNode(true))
 }
}
window.customElements.define("app-navbar", AppNavBar)

现在我需要将活动类传递到相应的导航项上。例如，当单击“我希望该项目获取类 .active”时，依此类推。<a href="/page-two.html">Nav item 2</a>

更新

像这样：

一页.html

<app-navbar page-one-nav-item="active"></app-navbar>

第二页.html

<app-navbar page-two-nav-item="active"></app-navbar>

第三页.html

<app-navbar page-three-nav-item="active"></app-navbar>

这可以通过html自定义元素来实现吗？

谢谢。

JavaScript HTML 参数传递 Web 组件

console.log(location);
customElements.define("nav-a", class extends HTMLElement {
  connectedCallback() {
    setTimeout(() => { // make sure innerHTML is parsed
      let href = this.getAttribute("href");
      let klass = (location.href.includes(href)) ? "active" : "";
      this.innerHTML = `<a class="${klass}" href="${href}">${this.innerHTML}</a>`;
    });
  }
});

上一个：检查 url 参数是否存在并将其添加到注册字段

下一个：在网页上的元素中将 URL 参数值显示为文本（来自非程序员的问题）

具有自定义 html 元素的活动导航项

Active nav item with custom html elements

评论