THE AIM
我在下面的代码中具有三个不同菜单的底部导航栏,这些菜单显示了三个不同的内容,希望在其中进行以下操作:
问题
第一次打开浏览器/选项卡后,将根据需要显示默认菜单/内容(主页)。但是,单击另一个菜单图标时,仅将其图标菜单显示为活动状态,而根本不显示内容,我认为这是因为我正在使用$(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="/Users/Fergo/Desktop/Bottom-navbar/index.html#firstPage" class="menu-1 active"><i class="fa fa-home"></i></a>
<a href="/Users/Fergo/Desktop/Bottom-navbar/index.html#secondPage" class="menu-2"><i class="fa fa-map"></i></a>
<a href="/Users/Fergo/Desktop/Bottom-navbar/index.html#thirdPage" class="menu-3"><i class="fa fa-search"></i></a>
</div>
</div>
由于按钮之间的分隔方式不会影响到内容的可见性,因此您需要明确说明要显示其可见性的特定元素。我建议检查$(this)引用的菜单项的类,并在其后跟随一个条件分支,该分支处理菜单1,菜单2和菜单3的情况,并分别引用要设置的内容它们是活动的,例如$('。content-1')。addClass('active')
关于持久性,您可以存储一个变量,该变量跟踪当前处于活动状态的项目,然后在通过条件加载页面激活该项目。阅读此书以了解如何存储该信息:https://stackoverflow.com/a/16206342/12380239