jQuery：如何记下side-nav的click-tab并在新页面加载时使其变为彩色（活动）？

Question

Part of HTML code of side-nav:

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

and it looks like this:

What I want to do is :

1. Click 'DRESSES & SKIRTS'
2. 'DRESSES & SKIRTS' page loaded
3. 'DRESSES & SKIRTS' words getting green & 'TOP & BLOUSES' words getting black.

To do this, I think that it need storage thing which could save click events or tab states so that even after new page is loaded, it can change color of categories.

And also wonder whether it should happen in front-side or not.

Even have no idea how to search in google.

Any ideas?

Answer 1

There are so many ways to achieve this, one is:

Put a hidden element in each page that contains the a page identification value like:

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

And on your layout put a check like:

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

Answer 2

A very elegant way that supports N levels.

On mouse down we remove the all the active list elements.

On click of a list element, we add the active class, as the nesting element will also receive the event, it will also be marked as active and so on.

You can mix that with the other answer and fill the hidden input with the element id, on page load you will just have to simulate the click on the targeted element:

$('#' + 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>