0

I have bootstrap 2.3.2 navigation list in my CakePHP app and jQuery script to add active class. But then I click on link, it flashes as active for moment and retain it;s current state. I want to know If I can keep my navigation items active after reload.

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

Script:

        $(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();
            });
        });
kaktusas2598
  • 641
  • 1
  • 7
  • 28
  • 1
    Try inserting your questions title into google, you'll find for example this: **http://stackoverflow.com/questions/11533542/twitter-bootstrap-add-active-class-to-li** – ndm Aug 12 '14 at 13:47
  • Thank you so much, it works indeed. I have looked over google, but didn't tried this though. – kaktusas2598 Aug 12 '14 at 13:52

2 Answers2

4

Added this script from Twitter Bootstrap add active class to li and my code works: 

/*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');        
};
Community
  • 1
  • 1
kaktusas2598
  • 641
  • 1
  • 7
  • 28
0
<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>
Md.Sukel Ali
  • 2,987
  • 5
  • 22
  • 34