保持当前选项卡导航栏项目的样式

Question

我正在构建一个带有两个选项卡、一个地图和一个常见问题解答选项卡的 Dash Web 应用程序。它看起来像这样：

如您所见，我定义了一个导航栏来浏览选项卡，它按预期工作。其定义如下：

dbc.Navbar(
    dbc.Container(
        children=[
            dbc.NavbarToggler(id='navbar-toggler', n_clicks=0),
            dbc.Collapse(
                dbc.Nav(
                    [
                        dbc.NavItem(
                            dbc.NavLink(
                                'Map',
                                href='/',
                                class_name='map-navlink',
                                id='map-navlink'
                            )
                        ),
                        dbc.NavItem(
                            dbc.NavLink(
                                'FAQ',
                                href='/faq',
                                class_name='faq-navlink',
                                id='faq-navlink'
                            )
                        )
                    ]
                ),
                id='navbar-collapse',
                navbar=True
            ),
        ],
        fluid=True,
        class_name='navbar'
    ),
    color='dark',
    dark=True
)

我现在想要实现的是更改用户正在查看的选项卡的样式。我已经通过 CSS 实现了当用户单击导航栏项目时样式发生变化。我使用的CSS如下。

.map-navlink {
    color: white;
    margin-left: 0.5vw;
}
.map-navlink:focus {
    color: #26BF64;
    background-color: grey;
}
.map-navlink:hover {
    color: #26BF64;
}


.faq-navlink {
    color: white;
    margin-left: 0.5vw;
}
.faq-navlink:focus {
    color: #26BF64;
    background-color: grey;
}
.faq-navlink:hover {
    color: #26BF64;
}

使用此 CSS，当用户单击地图导航链接或常见问题解答导航链接时，样式会正确更改。但是，当他们单击其他任何位置时，样式将恢复为原始状态。除此之外，我还希望当首次加载破折号应用程序时，地图导航链接的样式也会更改。

我已经找到了这 3 个 SO 问题：

点击后保持按钮样式

如何在点击按钮后保持focuse css样式（点击任意位置后样式消失）

即使点击其他按钮也保持CSS样式的焦点

但我似乎无法让它发挥作用。

有人可以帮助我吗？

这是我在这里发布的第一个问题，所以如果我犯了任何错误，我提前道歉。如果需要更多信息，请询问，我很乐意提供。

提前非常感谢您:)

Answer 1

您可以使用 javascript 来切换 css 类

示例：

const navLinks = document.querySelectorAll("nav > a[data-section]");
const sections = document.querySelectorAll("main > section[data-name]");

navLinks.forEach(navLink =>
  navLink.addEventListener("click", () => {
    sections.forEach(sec => sec.classList.toggle("active", sec.dataset.name == navLink.dataset.section));
    navLinks.forEach(link => link.classList.toggle("active", navLink == link));
  })
);

section{
  background-color: #ddd;
  box-sizing: border-box;
  padding: 1rem;
}
section:not(.active){
  display: none;
}
nav > a{
  padding: .5rem;
  display: inline-block;
  cursor: pointer;
}
nav > a.active{
    background-color: lightblue;
}

<nav>
  <a data-section="home" class="active">Home</a>
  <a data-section="about">About</a>
</nav>
<main>
  <section data-name="home" class="active">
    Home content
  </section>
  <section data-name="about">
    About content
  </section>
</main>