javascript - 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. “连衣裙和裙子”页面已加载
3. “DRESSES & SKIRTS”字样变为绿色，“TOP & BLOUSES”字样变为黑色。

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

并且还想知道它是否应该发生在前端。

甚至不知道如何在 google 中搜索。

有什么想法吗？

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