Question

刷新后如何激活菜单标签？

这是我的代码

 <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <style>
  .menu{width: 600px; height: 25; font-size: 18px;}
  .menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
  .menu li:hover, .menu li.active {
        background-color: #f90;
    }
</style>
</head>
<body>

<ul class="menu">
<li><a href='#'>One</a></li>
        <li><a href='#'>Two</a></li>
        <li><a href='#'>Three</a></li>
        <li><a href='#'>Four</a></li>
</ul>

<script type="text/javascript">

var make_button_active = function()
{
  //Get item siblings
  var siblings =($(this).siblings());

  //Remove active class on all buttons
  siblings.each(function (index)
    {
      $(this).removeClass('active');
    }
  )


  //Add the clicked button class
  $(this).addClass('active');
}

//Attach events to menu
$(document).ready(
  function()
  {
    $(".menu li").click(make_button_active);
  }  
)

</script>

有谁能告诉我如何解决这个问题？

Answer 1

就像@Johan所说，将您的上一个有效标签存储在localStorage或cookie中。由于两者之间的性能没有明显差异。我建议您使用localStorage，因为它更容易使用。像这样：

function make_button_active(tab) {
  //Get item siblings
  var siblings = tab.siblings();

  //Remove active class on all buttons
  siblings.each(function(){
      $(this).removeClass('active');
  })

  //Add the clicked button class
  tab.addClass('active');
}

//Attach events to menu
$(document).ready(function(){

  if(localStorage){ 
      var ind = localStorage['tab']       
      make_button_active($('.menu li').eq(ind));
  }

  $(".menu li").click(function () {
      if(localStorage){ 
          localStorage['tab'] = $(this).index();
      }
      make_button_active($(this));
   });

});

查看此fiddle。

刷新后如何激活菜单选项卡

1 个答案: