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

目标

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

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

问题所在

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

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

尝试

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

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

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

总结

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

$(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解决方案基本上在下面的链接中得到了回答，尽管评论中的建议极大地帮助解决了浏览器刷新之前的大部分问题。

使用 jQuery 选择特定 href 的锚标记

由于按钮的分隔方式不会使它们影响内容的可见性，因此您需要明确处理要显示其可见性的特定元素。我建议检查 $(this( 引用的菜单项的类，并在它后面跟一个条件分支，该分支处理菜单 1、菜单 2 和菜单 3 中每个大小写，引用它们各自的内容以将它们设置为活动状态，例如 $('.content-1'(.addClass('active'(

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

相关内容

最新更新

热门标签：