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

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

javascript jquery

Javascript 如何在刷新后激活菜单选项卡,javascript,jquery,Javascript,Jquery,刷新后如何激活菜单选项卡 <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: non

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

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

这是我的密码

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


.菜单{宽度：600px；高度：25；字体大小：18px；}
.menu li{列表样式：无；浮点：左；右边距：4px；填充：5px；}
.menu li：悬停，.menu li.active{
背景色：#f90；
}






var make_button_active=函数（）
{
//获取项目同级
var sides=（$（this.sides（））；
//删除所有按钮上的活动类
兄弟。每个（函数（索引）
{
$（this.removeClass（'active'）；
}
)
//添加单击的按钮类
$（this.addClass（'active'）；
}
//将事件附加到菜单
$（文件）。准备好了吗(
函数（）
{
$（“.menu li”）。单击（激活按钮）；
}  
)

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

就像@Johan所说的那样，将最后一个活动选项卡存储在

localStorage

或

cookie

中。因为两者在性能上没有明显的差异。我建议您使用

localStorage

，因为它更易于使用。像这样：

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

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));
   });

});

看看这个。

我删除了

java

，因为这显然与此无关，添加了javascript、jquery……正确地阐述了我想要做的事情，就像你提到的刷新页面一样<代码>本地存储/

会话存储

或$。cookie是您最好的选择。感谢您的回答，它在Mozilla中工作，但在internet explorer中不工作，如何修复它我看到了，您正在使用ie8吗？那就看看这个帖子。如果它仍然不适合您，那么我认为您应该切换到

cookie

。有一个插件可以帮助您轻松设置和检索cookies-。但我也想和大家分享一下如何只用javascript就可以做到这一点。看到这个了吗

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