クリック時に同じIDの要素にクラスを追加する、ページ更新時のクラスを覚えている

デフォルトで表示されるフロントページと、関連するリンクが表示されたときに表示される子ページフロントページをクリックします。クリック時に同じIDの要素にクラスを追加する、ページ更新時のクラスを覚えている

私は何を達成しようとしていることpage-link要素がクリックされたときに、クラスactive-pageは、同じIDを持つ内側のページに追加されていることである、とintroセクションでは、アクティブなページがに設定されている& off-canvasが追加されたクラスを、持っています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'); 
}); 

});

に立っそれを達成する方法について。

出典

2017-08-04 Kirk Woodill

**さんは一意である必要がありますIDは、 ''データid'の 'dataset'に一致するようにid'を意味していますか？ – NewToJS

あなたは、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

出典

2017-08-04 11:29:17 Zapo

この問題は1クラスを使用して解決することができます。 2つのクラスを使用してコードを複雑にしました。私は.active-pageと.off-canvasをクラス.hiddenに置き換えました。これは、より簡単なコードを提供します。

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>

出典

2017-08-04 11:30:31

クリック時に同じIDの要素にクラスを追加する、ページ更新時のクラスを覚えている

答えて

関連する問題