THE AIM
刷新浏览器后，我希望用户保留在刷新之前的菜单/内容中。
问题
刷新浏览器后，用户刷新之前所在的特定菜单的内容将显示为活动状态（即显示在屏幕上）。但是，该特定内容的菜单图标未显示为活动状态（即，它不显示黑色）。
我在选择锚元素时遇到困难（找到图标的地方）当前 href 的（刷新前用户所在位置与刷新后用户所在位置相同）.
尝试
$(document).ready(function() {
$('a[class^=menu]').click(function() {
$('a[class^=menu]').removeClass('active');
$('div[class^=content]').removeClass('active');
if($(this).hasClass('menu-1')) {
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
}
if($(this).hasClass('menu-2')) {
$('.menu-2').addClass('active');
$('.content-2').addClass('active');
}
if($(this).hasClass('menu-3')) {
$('.menu-3').addClass('active');
$('.content-3').addClass('active');
}
});
if (window.location.hash.substr(1) != '') {
$('a[class^=menu],div[class^=content]').removeClass('active');
// making the content active
$('#' + window.location.hash.substr(1)).addClass('active');
// making the menu active
$('a[href="' + 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>
</div>
感谢您的帮助和建议。
你遇到的问题是你正在寻找错误的href.
你试图寻找a[href="secondPage"]但应该是a[href="mywebsite#secondPage"]
我还改变了您选择课程并将其添加为活动课程的方式。这种方式更加动态。
注意：在JS文件中，有一个变量叫做hash，现在它指向#secondPage为了假装我们在第二页，您可以更改该值，重新运行它，它将选择一个新的活动项目。你只需要更换hash to be window.location.hash，我还把它拿出来一个变量，这样你就不会每次都调用它。
// just replace this with "window.location.hash"
const hash = "#secondPage";
$(document).ready(function() {
$('a[class^=menu]').click(function() {
// we remove the active classes.
$('a[class^=menu]').removeClass('active');
$('div[class^=content]').removeClass('active');
// we get the item that was clicked and select the item
// in a dynamic way.
const clickedClass = $(this).attr('class');
const [identifier, number] = clickedClass.split('-')
$(`.${clickedClass}`).addClass('active');
$(`.content-${number}`).addClass('active');
});
const active = hash.substr(1);
if (active != '') {
$('a[class^=menu],div[class^=content]').removeClass('active');
// making the content active
$(`#${active}`).addClass('active');
// making the menu active
$(`a[href="mywebsite#${active}"]`).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>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
