jQuery：如何記下side-nav的click-tab並在新頁面加載時使其變為彩色（活動）？

Question

side-nav的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. “連衣裙和裙子”字樣變綠色，“頂部和襯衫”字樣變黑。

為此，我認為它需要可以保存單擊事件或選項卡狀態的存儲內容，以便即使在加載新頁面后也可以更改類別的顏色。

並且也想知道它是否應該發生在正面。

甚至不知道如何在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>
}

Answer 2

支持N級的一種非常優雅的方式。

在鼠標按下時，我們刪除所有活動列表元素。

在單擊列表元素時，我們添加了活動類，因為嵌套元素還將接收事件，它也將被標記為活動等。

您可以將其與其他答案混合，並在隱藏的輸入中填充元素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>