如何在页面刷新或加载其他页面后使用JavaScript保持tab / li活动?

时间:2015-04-10 18:20:04

标签: javascript jquery html

我想将class="active"转移到我已打开的当前标签页。

例如:如果我在信息中心页面中,因为<li>的类已设置为活动状态。如果我进入另一个页面,例如个人资料,现在我想将class=active从信息中心转移到个人资料。

<ul class="nav sidebar-menu">
   <li class="active">
      <a href="dashboard.php">
         <span class="sidebar-title">Dashboard</span>
      </a>
   </li>
   <li>
      <a href="profile.php">
         <span class="sidebar-title">Profile</span>
      </a>
   </li>
</ul>

2 个答案:

答案 0 :(得分:0)

你可以用cookies实现它。 因为我建议插件

github.com/carhartl/jquery-cookie

你可以

设置一个像:

的cookie
$.cookie("test", 1);

删除像:

这样的Cookie
$.removeCookie("test");

并获取cookie的值,如:

var cookieValue = $.cookie("test");

因此,当您点击按钮时,您可以说

$('.class').on('click', function(){
    var yourClass = $(this).attr("class"); // the class which should get active
    $.cookie('activeClass', yourClass);
});

并准备好每页

你可以这样做:

function checkCookie(){
    var cookieValue = $.cookie('activeClass');
    if(cookieValue.length > 0){
        $(cookieValue).addClass('active');
        $.removeCookie("activeClass");
    }
}

没有亲自尝试。希望它有效......至少你知道怎么做:)。

啊,用户当然需要激活cookie!

问候timmi

答案 1 :(得分:0)

我假设您要根据实际网址突出显示菜单项?

可以使用javascript location object完成。

您可以按照以下方式获取实际网址的每个部分。对于此链接http://example.com/index.php,它将是:

  • location.protocol = http:
  • location.host = example.com
  • location.pathname = /index.php

对于OP示例,您只需使用location.pathname

// get the actual pathname:
var path = location.pathname;
// filter menu items to find one that has anchor tag with matching href:
$('.sidebar-menu li').filter(function(){
    return '/' + $('a', this).attr('href') === path;
// add class active to the item:
}).addClass('active');