Как сохранить ту же самую «ul» активную после перезагрузки страницы?

Question

Я работаю в html, css, jquery для переключения ul. Я хочу, чтобы тот же ul был активным после перезагрузки страницы.

Как это сделать?

Моя HTML структура:

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

И мой JQuery является:

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

Пожалуйста, помогите мне решить эту проблему.

Answer 1

Вы можете использовать localStorage

Для сохранения объекта

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

Чтобы получить элемент

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

Для справки - localStorage

Пожалуйста, см - только дает представление для вас для изучения

Answer 2

localStorage - лучший вариант для того, что вы ищете. Вы можете сохранить и получить товар от localStorage. Рассмотрим ниже пример.

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>

Поскольку snippet не поддерживает localStorage, это то, что он сказал мне, по крайней мере, Вот

JsFiddle Demo

для вас.

Answer 3

Это поможет вам.

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