javascript - 同时使用 $(this) 和 addClass/removeClass 显示/隐藏底部导航栏的内容

Question

目标

我有下面的代码，底部导航栏包含三个不同的菜单，显示三个不同的内容，我希望在其中发生以下情况:

1. 默认的事件菜单/内容应该是第一个(主菜单)。
2. 一个菜单/内容应始终处于事件状态，即，如果我单击当前菜单，则不会发生任何事情，只有当我单击其他菜单/内容时，我才会看到一些变化(即其他菜单和内容将处于事件状态)。<
3. 刷新页面时，用户应保留在刷新之前的菜单/内容中，并且菜单图标处于事件状态(即黑色)并显示相应菜单的内容。
4. 关闭浏览器/选项卡并重新打开时，显示的菜单/内容应为默认菜单/内容(主菜单)。

问题

首次打开浏览器/选项卡后，将根据需要显示默认菜单/内容(主页)。但是，当单击另一个菜单图标时，只有它的图标菜单显示为事件状态，而内容根本不显示，我认为这是因为我正在使用 $(this) 并且它仅代表a[class^=menu]。

刷新时，菜单内容显示为事件状态，但菜单图标不是事件的(即不是黑色的)。当我不断点击其他菜单时，它们的菜单图标显示为事件状态，但它们各自的内容根本不显示。

尝试

通过执行以下操作，我显然得到了内容重叠...

$("div[class^=content]").addClass("active");

我不清楚如何正确使用 $(this) 来定位当前菜单的相应内容。

摘要

1. 当相应菜单也处于事件状态时，将相应菜单的内容设置为事件状态。
2. 刷新浏览器时，菜单和内容都应处于事件状态(即菜单图标为黑色，并显示相应菜单的内容)。

      $(document).ready(function() {

        $("a[class^=menu]").click(function() {

          if ($("a[class^=menu],div[class^=content]").hasClass("active")) {
            $("a[class^=menu],div[class^=content]").removeClass("active");
          }

          var href = $(this).attr("href");

          $(this).addClass("active");
          $(href).addClass("active");

        });

        if (window.location.hash.substr(1) != "") {
          $("a[class^=menu],div[class^=content]").removeClass("active");
          $('a[href="' + window.location.hash.substr(1) + '"]').addClass("active");
          $("#" + window.location.hash.substr(1)).addClass("active");
        }

      });

.container {
      margin: 0 auto;
      background-color: #eee;
      border: 1px solid lightgrey;
      width: 20vw;
      height: 90vh;
      font-family: sans-serif;
      position: relative;
    }

    header {
      background-color: lightgreen;
      padding: 5px;
      text-align: center;
      text-transform: uppercase;
    }

    .bottom-navbar {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 6px 0;
      overflow: hidden;
      background-color: lightgreen;
      border-top: 1px solid var(--color-grey-dark-3);
      z-index: 50;
      display: flex;
      justify-content: space-between;
    }

    .bottom-navbar>a {
      display: block;
      color: green;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      padding: 0 10px;
    }

    .bottom-navbar>a.active {
      color: black;
    }

    .menu-1.active,
    .menu-2.active,
    .menu-3.active {
      color: black;
    }

    .content-1,
    .content-2,
    .content-3 {
      display: none;
    }

    .content-1.active,
    .content-2.active,
    .content-3.active {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 
 <div class="container">
    <header>My header</header>
    <div class="main-content">
      <div class="content-1 active" id="firstPage">House content</div>
      <div class="content-2" id="secondPage">Map content</div>
      <div class="content-3" id="thirdPage">Explore content</div>
      <div class="bottom-navbar">
        <a href="mywebsite#firstPage" class="menu-1 active"><i class="fa fa-home"></i></a>
        <a href="mywebsite#secondPage" class="menu-2"><i class="fa fa-map"></i></a>
        <a href="mywebsite#thirdPage" class="menu-3"><i class="fa fa-search"></i></a>
      </div>
    </div>

更新

URL 解决方案基本上在下面的链接中得到了解答，尽管评论中的建议在刷新浏览器之前极大地帮助解决了大部分问题。

Selecting the anchor tag of a particular href using jQuery

Answer 1

由于按钮的分隔方式不允许它们影响内容的可见性，因此您需要显式地处理要显示其可见性的特定元素。我建议检查 $(this) 引用的菜单项的类，并在其后面跟随一个条件分支，该条件分支处理 menu-1、menu-2 和 menu-3 中每个菜单的情况，引用它们各自的内容来设置它们是活跃的，例如 $('.content-1').addClass('active')

对于持久性，您可以存储一个变量来跟踪当前事件的项目，然后通过条件在页面加载时激活它。阅读本文以了解如何存储该信息:https://stackoverflow.com/a/16206342/12380239