javascript - jQuery: How can I remember clicked-tab of side-nav and make it colored(active) when newly page loaded? -


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 looks this:

enter image description here

what want :

  1. click 'dresses & skirts'
  2. 'dresses & skirts' page loaded
  3. 'dresses & skirts' words getting green & 'top & blouses' words getting black.

to this, think need storage thing save click events or tab states after new page loaded, can change color of categories.

and wonder whether should happen in front-side or not.

even have no idea how search in google.

any ideas?

there many ways achieve this, 1 is:

put hidden element in each page contains page identification value like:

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

and on layout put check like:

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

Comments

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -