Question

我正在尝试构建一个包含多个内页的页面 - 默认显示的首页，以及单击首页上相关链接时显示的子页面。

我想要实现的是，当点击page-link元素时，类active-page会添加到具有相同ID的内部页面，intro部分会有已添加课程off-canvas，＆amp;活动页面在localStorage中设置 - 因此，如果由于任何原因刷新页面，则显示正在查看的最后一页。

或者，当单击lnk-rtn-home元素时，当前inner-page应丢失活动页面类，而front-page丢失其画布外类。同样，这应该更新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');
});

});

没有多少玩弄它已经使它工作，在这个阶段我迷失了如何实现它。

Answer 1

只使用1个类就可以解决这个问题。您使用2个类使代码更复杂。我将.active-page和.off-canvas替换为类.hidden。这样可以提供更简单的代码。

＆＃13;

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');
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

你只需要为hasClass条件选择正确的元素。

您可以使用父母，如下所示：

$(document).ready(function(){

// 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() {
  var jqSection = $(this).parent();
    if (jqSection.hasClass('active-page')) {
        jqSection.removeClass('active-page');
        localStorage.removeItem('current-page');
    }

    $('#intro').removeClass('off-canvas');
});

});

以下是一个示例：https://plnkr.co/edit/xfgHpWdDpnDTyjLYYrGd?p=preview

在单击时将类添加到具有相同ID的元素，记住页面刷新时的类

2 个答案: