我正在尝试构建一个包含多个内页的页面 - 默认情况下显示的首页，以及单击首页上的相关链接时显示的子页面。
我想要实现的是，当单击 page-link 元素时，类 active-page 被添加到具有相同 id 的内页，并且 intro 部分添加了一个类 off-canvas，并且事件页面设置在 localStorage 中 - 这样如果由于任何原因刷新页面，最后一页显示正在查看。
或者，当点击 lnk-rtn-home 元素时，当前 inner-page 应该失去事件页面类，而 front-page 失去了它的 off-canvas 类。同样，这应该更新 localStorage。
HTML结构如下:
<body>
<div class="container">
<section id="intro" class="front-page row">
{{ content }}
<a data-id='about-me' class='page-link'>About Me</a>
{{ more content }}
<a data-id='contact' class='page-link'>Contact</a>
</section>
<section id="about-me" class="inner-page row">
{{ content }}
<a class='lnk-rtn-home'>Return Home</a>
</section>
<section id="contact" class="inner-page row">
{{ content }}
<a class='lnk-rtn-home'>Return Home</a>
</section>
</div>
</body>
当前JS站在
$(document).ready(function(){
var activePageSet = localStorage.getItem('current-page');
// Check if an active page has been set
if (activePageSet) {
$('#' + activePageSet).addClass('active-page');
$('#intro').addClass('off-canvas');
}
// Links to inner pages
$('.page-link').click(function() {
var currentPage = $(this).data("id");
$('#' + currentPage).addClass("active-page");
$('#intro').addClass('off-canvas');
localStorage.setItem('current-page', JSON.stringify(currentPage));
});
// Link to return home
$('.lnk-rtn-home').click(function() {
if ($('.inner-page').hasClass('active-page')) {
$(this).removeClass('active-page');
localStorage.removeItem('current-page');
}
$('#intro').removeClass('off-canvas');
});
});
再多的尝试也没有成功，在这个阶段我不知道如何实现它。
最佳答案
仅使用 1 个类即可解决此问题。通过使用 2 个类，您的代码变得更加复杂。我用类 .hidden 替换了 .active-page 和 .off-canvas。这提供了一个更简单的代码来遵循。
var activePageSet = null; //localStorage.getItem('current-page');
//not able to do localStorage in snippet
// Check if an active page has been set
if (activePageSet) {
$('#' + activePageSet).removeClass('hidden');
$('#intro').addClass('hidden');
}
// Links to inner pages
$('.page-link').click(function() {
var activePageId = $(this).data("id");
$('#' + activePageId).removeClass("hidden");
$('#intro').addClass('hidden');
//localStorage.setItem('current-page', JSON.stringify(activePageId));
});
// Link to return home
$('.lnk-rtn-home').click(function() {
var activePage = $(this).parent();
activePage.addClass('hidden');
$('#intro').removeClass('hidden');
//localStorage.removeItem('current-page');
});.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<section id="intro" class="front-page row ">
{{ intro content }}
<a data-id='about-me' class='page-link'>About Me</a>
{{ more content }}
<a data-id='contact' class='page-link'>Contact</a>
</section>
<section id="about-me" class="inner-page row hidden">
{{ about content }}
<a class='lnk-rtn-home'>Return Home</a>
</section>
<section id="contact" class="inner-page row hidden">
{{ contact content }}
<a class='lnk-rtn-home'>Return Home</a>
</section>
</div>关于javascript - 单击时将类添加到具有相同 ID 的元素，在页面刷新时记住类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45505221/