JQuery/JavaScript:如何在链接后保持活动的导航状态？
JQuery/JavaScript:如何在链接后保持活动的导航状态？
提问于 2018-08-26 05:12:02
我找到了许多关于如何通过jquery将活动类添加到导航链接的帖子，但没有关于如何在单击导航链接后保持活动状态的文章。
使用这个站点上的代码，我删除并添加了活动类onclick。为了在导航/重新加载后保持这种活动状态，我的想法是通过onclick设置会话变量，然后重新添加活动类。
我的东西不能用了。
按照今天的标准，This似乎是可行的，但似乎不是最佳实践。
HMTL:
<nav>
<a href="about.xhtml" id="about" >About</a>
<span class="nav_divide"></span>
<a href="work.xhtml" id="work" >Work</a>
<span class="nav_divide"></span>
<a href="mission.xhtml" id="mission" >Mission</a>
<span class="nav_divide"></span>
<a href="contact.xhtml" id="contact" >Contact</a>
</nav> CSS:
nav a.active {
border-bottom: 3px solid #d10f0f;
}脚本：
//Check for session variables.
$(document).ready(function() {
//If 'page' session is defined
if (window.sessionStorage.pageSession) {
// make selected nav option active.
var activeTab = '#' + window.sessionStorage.pageSession;
$(activeTab).addClass('active');
} else {
// If pageSession is not defined, you're at home
window.sessionStorage.pageSession = ('page', 'home');
}
//Set link location for page refresh/reload
});
// Place or remove nav active state.
$(document).on('click','nav a',function(){
//Set 'page' and 'link' variables based on nav values.
var page = this.id;
var link = this.href;
// Set 'page' and 'link' session variables based on nav values.
var window.sessionStorage.pageSession = ('page', page);
var window.sessionStorage.linkSession = ('link', link);
// Update classes.
$('nav .active').removeClass('active');
$(this).addClass('active');
// Link to nav ahref.
window.location = sessionStorage.linkSession;
});回答 1
Stack Overflow用户
发布于 2018-08-26 05:41:50
你可以使用localStorage！这是一个示例：
//Check for session variables.
$(document).ready(function() {
// Set paramenters obj for initialization
let paramObj = {page:'current-page-name',link:location.href};
// Initialize pageSession obj to storage the current page
localStorage.setItem('pageSession', JSON.stringify(paramObj));
// Retrieve page session settings updated
let pageStorage = localStorage.getItem('pageSession') != undefined ? JSON.parse(localStorage.getItem('pageSession')) : paramObj;
// make selected nav option active.
let activeTab = '#' + pageStorage.page;
$(activeTab).addClass('active');
//Set link location for page refresh/reload
$(document).on('click','nav a',function(e){
e.preventDefault();
//Set 'page' and 'link' variables based on nav values.
let page = JSON.parse(localStorage.getItem('pageSession')).page;
let link = JSON.parse(localStorage.getItem('pageSession')).link;
// Set 'page' and 'link' session variables based on nav values.
localStorage.setItem('pageSession', JSON.stringify({page:$(this).attr('id'), link:$(this).attr('href')}));
// Update classes.
$('nav .active').removeClass('active');
$(this).addClass('active');
// Link to nav ahref.
window.location = $(this).attr('href');
});
});nav a.active {
border-bottom: 3px solid #d10f0f;
}<nav>
<a href="javascript:;" id="home" >Home</a>
<span class="nav_divide"></span>
<a href="javascript:;" id="about" >About</a>
<span class="nav_divide"></span>
<a href="javascript:;" id="work" >Work</a>
<span class="nav_divide"></span>
<a href="javascript:;" id="mission" >Mission</a>
<span class="nav_divide"></span>
<a href="javascript:;" id="contact" >Contact</a>
</nav>
有很多方法可以做到这一点。这只是其中一种方法！
现在，代码在每个页面上初始化pageSession，因此JSON.parse(...)已经解决了！
在这里试试，jsfiddle。现在它起作用了！
我希望它能帮上忙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52021256
复制相关文章
相似问题