Question

我发现了很多关于如何通过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;

});

Answer 1

您可以使用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这里尝试。现在可以了！

希望对您有帮助。

jQuery / JavaScript：如何在链接后保持活动的导航状态？

1 个答案: