Wie behält man das gleiche "ul" nach dem Neuladen der Seite bei?

Question

Ich arbeite in HTML, CSS, Jquery, um die ul umschalten. Ich möchte das gleiche ul aktiv sein, nachdem die Seite neu geladen wird.

Wie geht das?

Meine HTML-Struktur ist:

<ul id="level1" class="category"> 
<li class="level1 inactive"> 
    <a href="#">abc</a> 
    <ul id="level2" style=" display:none;"> 
    <li class="level2 inactive"><a href="#url">Level2</a></li> 
    <li class="level2 inactive"><a href="#url">Level2</a></li> 
    </ul> 
</li> 
<li class="level1 inactive"> 
    <a href="#">xyz</a> 
    <ul id="level2" style=" display:none;"> 
    <li class="level2 inactive"><a href="#url">Level2</a></li> 
    <li class="level2 inactive"><a href="#url">Level2</a></li> 
    </ul> 
</li> 

Und mein jquery ist:

 <script> 
    var $j = jQuery.noConflict(); 
    $j(function() { 
     $j('li.level1').click(function() { 
      $j("li.level1").addClass('inactive').removeClass("current"); 
      $j(this).addClass('current').removeClass('inactive'); 
     $j('ul#level2').hide(); 
     $j('ul#level2', this).show(); 
     }); 


}); 
</script> 

Bitte mir helfen, dieses Problem zu beheben.

Answer 1

können Sie verwenden localStorage

ein Element zu speichern

localStorage.setItem('last-accessed-list', 'level2'); 

Um einen Artikel

var lastAccessedList = localStorage.setItem('last-accessed-list'); 

als Referenz zu erhalten - localStorage

Bitte sehen - Nur Idee für Sie geben zu erforschen

Answer 2

localStorage ist die beste Option für das, was Sie suchen. Sie können den Artikel von localStorage speichern und erhalten. Betrachten Sie das folgende Beispiel.

var $j = jQuery.noConflict(); 
 
$j(function() { 
 
    var index=localStorage.getItem("liIndex"); //accessing localStorage item 
 
    $j('li.level1').click(function() { 
 
    localStorage.setItem("liIndex",$j(this).index()); //store the index of clicked element 
 
    $j("li.level1").addClass('inactive').removeClass("current"); 
 
    $j(this).addClass('current').removeClass('inactive'); 
 
    $j('ul#level2').hide(); 
 
    $j('ul#level2', this).show(); 
 
    }); 
 
    if(index) //get the index after attaching click event 
 
    $("li.level1").eq(index).trigger('click'); //trigger click for that element with that index 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="level1" class="category"> 
 
    <li class="level1 inactive"> 
 
    <a href="#">abc</a> 
 
    <ul id="level2" style=" display:none;"> 
 
     <li class="level2 inactive"><a href="#url">Level2</a> 
 
     </li> 
 
     <li class="level2 inactive"><a href="#url">Level2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="level1 inactive"> 
 
    <a href="#">xyz</a> 
 
    <ul id="level2" style=" display:none;"> 
 
     <li class="level2 inactive"><a href="#url">Level2</a> 
 
     </li> 
 
     <li class="level2 inactive"><a href="#url">Level2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
<ul>

Da ist snippet nicht localStorage unterstützen, das ist, was sie sagte, zumindest für mich, hier die für Sie

JsFiddle Demo

ist.

Answer 3

Dies wird Ihnen helfen.

<script> 
    var $j = jQuery.noConflict(); 
    $j(function() { 
     $j('li.level1').click(function() { 
      $j("li.level1").addClass('inactive').removeClass("current"); 
     $j(this).addClass('current').removeClass('inactive'); 
     $j('ul#level2').hide(); 
     $j('ul#level2', this).show(); 
       var parent = $j(this).parent().attr('id'); 
       localStorage.setItem('activeIndex', $j(this).index()); 
     }); 
      var currentIndex = localStorage.getItem('activeIndex');  $j('li.level1').eq(currentIndex).addClass('current').removeClass('inactive'); 
      $j('li.level1').eq(currentIndex).children('ul').css('display','block'); 
}); 
</script>