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存储和获取该项目。请考虑以下示例。

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，所以它至少对我说，这是

为你。

Answer 2

这会对你有帮助。

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

Answer 3

您可以使用localStorage

保存项目

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

获取物品

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

供参考 - localStorage

请参阅 - 只为您提供探索的想法

如何在页面重新加载后保持相同的`ul`活动状态？

3 个答案:

{{ 3}}