jQuery:我如何记得边导航的点击选项卡，并在新页面加载时使其着色(活动)？

Question

侧导航的HTML代码的一部分：

<div class="side-nav margin-bottom-60">
    <div class="side-nav-head">
        <button class="fa fa-bars"></button>
        <h4>CATEGORIES</h4>
    </div>

    <ul class="list-group list-group-bordered list-group-noicon uppercase">
        <li class="list-group-item active">
            <a class="dropdown-toggle" href="#">WOMEN</a>
            <ul>
                <li><a href="#"><span class="size-11 text-muted pull-right">(123)</span> Shoes &amp; Boots</a></li>
                <li class="active"><a href="#"><span class="size-11 text-muted pull-right">(331)</span> Top &amp; Blouses</a></li>
                <li><a href="#"><span class="size-11 text-muted pull-right">(234)</span> Dresses &amp; Skirts</a></li>
            </ul>
        </li>
        <li class="list-group-item">
            <a class="dropdown-toggle" href="#">MEN</a>
            <ul>
                <li><a href="#"><span class="size-11 text-muted pull-right">(88)</span> Accessories</a></li>
                <li><a href="#"><span class="size-11 text-muted pull-right">(67)</span> Shoes &amp; Boots</a></li>
                <li><a href="#"><span class="size-11 text-muted pull-right">(32)</span> Dresses &amp; Skirts</a></li>
                <li class="active"><a href="#"><span class="size-11 text-muted pull-right">(78)</span> Top &amp; Blouses</a></li>
            </ul>
        </li>
    </ul>
</div>

看起来是这样的：

​

​

我想做的是：

1. 点击“衣服和裙子”
2. “'DRESSES &‘DRESSES&’DRESSES”页面已加载
3. ‘'DRESSES &裙子’字变绿了，‘上衣和上衣’字变黑了。

为此，我认为它需要存储的东西，可以保存单击事件或选项卡状态，这样即使在加载新页面之后，它也可以更改类别的颜色。

同时也想知道它是否应该发生在正面。

甚至不知道如何在谷歌搜索。

有什么想法吗？

Answer 1

要做到这一点有很多种方法，其中之一是：

在每个页面中放置一个隐藏元素，其中包含一个页面标识值，如下所示：

<input class="identification" value="boys_section" />
<input class="identification" value="girl_section" />
...

在你的布局上做一个检查，比如：

var identity =  $('.identification').val();
if(identity == 'boys_section')
{
    // set the css to change the color of the matching <li>
}

Answer 2

一种支持N级的非常优雅的方法。

在鼠标向下，我们删除所有的活动列表元素。

在单击list元素时，我们添加active类，因为嵌套元素也将接收事件，它也将被标记为active等。

您可以将其与另一个答案混合，并使用元素id填充隐藏的输入，在页面加载时，您只需模拟对目标元素的单击：

$('#' + paramFromQuery).click();

​

$('li').click(function(event){
  $(this).addClass('active');
});

$('li').mousedown(function(event){
  $('li.active').removeClass('active');
});

function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var selected = getParameterByName('selected');
if(selected){
  console.log(selected);
  $('.' + selected).trigger("click");
}else{
  // simulation for demo on first load
  selected = "list-1-2";
  $('.' + selected).trigger("click");
}

li.active > a{
  color: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="side-nav margin-bottom-60">
    <div class="side-nav-head">
        <button class="fa fa-bars"></button>
        <h4>CATEGORIES</h4>
    </div>

    <ul class="list-group list-group-bordered list-group-noicon uppercase">
        <li class="list-group-item list-1">
            <a class="dropdown-toggle" href="#?selected=list-1">WOMEN</a>
            <ul>
                <li class="list-1-1"><a href="#?selected=list-1-1"><span class="size-11 text-muted pull-right">(123)</span> Shoes &amp; Boots</a></li>
                <li class="list-1-2"><a href="#?selected=list-1-2"><span class="size-11 text-muted pull-right">(331)</span> Top &amp; Blouses</a></li>
                <li class="list-1-3"><a href="#?selected=list-1-3"><span class="size-11 text-muted pull-right">(234)</span> Dresses &amp; Skirts</a></li>
            </ul>
        </li>
        <li class="list-group-item list-2">
            <a class="dropdown-toggle" href="#?selected=2">MEN</a>
            <ul>
                <li class="list-2-1"><a href="#?selected=list-2-1"><span class="size-11 text-muted pull-right">(88)</span> Accessories</a></li>
                <li class="list-2-2"><a href="#?selected=list-2-2"><span class="size-11 text-muted pull-right">(67)</span> Shoes &amp; Boots</a></li>
                <li class="list-2-3"><a href="#?selected=list-2-3"><span class="size-11 text-muted pull-right">(32)</span> Dresses &amp; Skirts</a></li>
                <li class="list-2-4"><a href="#?selected=list-2-4"><span class="size-11 text-muted pull-right">(78)</span> Top &amp; Blouses</a></li>
            </ul>
        </li>
    </ul>
</div>

​