Сохранение элементов навигации бутстрапа, активных после перезагрузки в CakePHP

Question

У меня есть загрузочный список начальной загрузки 2.3.2 в моем приложении CakePHP и скрипте jQuery для добавления активного класса. Но затем я нажимаю на ссылку, она мигает как активная для момента и сохраняет ее текущее состояние. Я хочу знать, если я смогу сохранить свои навигационные элементы активными после перезагрузки.

<ul class="nav nav-pills nav-stacked menu">      
    <li><?php echo $this->Html->link(__('Reservations'), array('plugin' => false, 'controller' => 'streservations', 'action' => 'queue')); ?></li> 
    <li><?php echo $this->Html->link(__('Calendar'), array('plugin' => false, 'controller' => 'streservations', 'action' => 'calendar')); ?></li> 
</ul> 

Сценарий:

 $(document).ready(function() { 
      $('.menu li').click(function(e) { 
       $('.menu li.active').removeClass('active'); 
       var $this = $(this); 
       if (!$this.hasClass('active')) { 
        $this.addClass('active'); 
       } 
       // e.preventDefault(); 
      }); 
     });      

Answer 1

Добавлен скрипт из Twitter Bootstrap add active class to li и мой код работает:

/*Menu handler*/ 
$(function(){ 
    var url = window.location; 
    // Will only work if string in href matches with location 
    $('ul.nav a[href="'+ url +'"]').parent().addClass('active'); 

    // Will also work for relative and absolute hrefs 
    $('ul.nav a').filter(function() { 
     return this.href == url; 
    }).parent().addClass('active');   
}; 

Answer 2

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#home">Home</a></li> 
    <li><a href="#menu1">Menu 1</a></li> 
    <li><a href="#menu2">Menu 2</a></li> 
    <li><a href="#menu3">Menu 3</a></li> 
</ul> 

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
    </div> 
    <div id="menu3" class="tab-pane fade"> 
     <h3>Menu 3</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
    </div> 
</div> 



<script> 
    $(document).ready(function(){ 
     $(".nav-tabs a").click(function(){ 
      $(this).tab('show'); 
     }); 
    }); 
</script>