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

How to activate menu tab after refreshing

本文关键字：菜单 选项 激活 刷新      更新时间：2023-09-26

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

这是我的代码

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

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

正如@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));
   });
});

看看这把小提琴。

相关文章：