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>
尝试一下...
$("a.menu").on('click',function() {
$("a.menu").removeClass('active');
$(this).addClass('active');
});