左侧导航链接保持打开和活动状态

时间:2016-03-16 18:57:19

标签: javascript jquery css

目前我的左侧导航菜单有效:

$('.navContainer li div').click(function () {
var $t = $(this);
var $next = $t.next('.navtoggle');
$('.navtoggle').not($next).slideUp('active');
$next.slideToggle(400);
});

问题是,最后一级的链接需要根据打开的页面和导航保持打开的方式突出显示。上面的脚本,一旦点击,将加载相应的页面并关闭导航。我尝试过使用cookies而无法使用它。我已经尝试使用文档就绪,它可以工作,直到页面重新加载,它只是重置。所以我有点卡住了。我试过了:

$(document).ready(function () {
$('.navContainer .navtoggle li a').click(function (e) {
    $(e.target).addClass('current');
    });
});

.navContainer .navtoggle li a,是用于保持激活的最后一个链接。我正在添加类'current',因为在导航中使用了active。这将改变链接颜色,就是这样。我也试过了:target和a:active,但是一切都在不断重置。

1 个答案:

答案 0 :(得分:0)

我能够在http://www.itworld.com/article/2832973/development/setting-an-active-menu-item-based-on-the-current-url-with-jquery.html找到答案,并改变一些事情来使这项工作成功。希望将大部分功劳归功于该网页,但我能够以此为基础使其工作。最终的代码是:

$(function () {
setNavigation(); });

function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);

$(".navContainer .navtoggle li a").each(function () {
    var href = $(this).attr('href');
    if (path.substring(0, href.length) === href) {
        $(this).closest('li a').addClass('current');
        $(this).closest('.navtoggle').css('display', 'block');
    }
}); }