Twitter Bootstrap with PLAY framework setting nav bar <li> elements to active

StackOverflow https://stackoverflow.com/questions/23647586

Question

Hi I have a navbar in my home.scala.html as follows-

<ul  class="nav nav-justified">
<li><a href="@routes.Application.apps()">@Messages("views.main.apps")</a></li>
<li ><a href="#">@Messages("views.main.activity")</a></li>
<li><a href="@routes.Application.devices()">@Messages("views.main.devices")</a></li>
<li><a href="#">@Messages("views.main.account")</a></li>
<li id="logout"><a href="#">@Messages("views.main.logout")</a></li>
</ul>

I am trying to set active class on click as follows-

<script>
        $(document).ready(function () {
        $('ul.nav > li').click(function (e) {
        $('ul.nav > li').removeClass('active');
        $(this).addClass('active');                
        });            
        });
</script>

However on running the application only the li elements which have href="#" get set as active ,the other li elements remain inactive on click even though the page is redirected to the link of the tag. Any help would be appreciated. Thanks

Edit:The structure of the main.scala.html is 

    <html>
    <head></head><body>
            <ul  class="nav nav-justified">

              <li><a href="@routes.Application.apps()">@Messages("views.main.apps")</a></li>
            <li ><a href="">@Messages("views.main.activity")</a></li>
            <li><a href="@routes.Application.devices()">@Messages("views.main.devices")</a></li>
            <li><a href="#">@Messages("views.main.account")</a></li>
            <li id="logout"><a href="#">@Messages("views.main.logout")</a></li>
            </ul>
            </div>

          </nav>
            <div id="showsspData">
            @content
            </div>
    </div>
    </body>
    </html>

Then the apps.scala.html will be as-
@main("string to pass"){
//html content for page
}
Était-ce utile?

La solution

You need to use e.preventDefault() to prevent default action of the anchor and target .click() handler on the anchors instead:

$(document).ready(function () {
    $('ul.nav > li a').click(function (e) {
        e.preventDefault();
        $('ul.nav > li').removeClass('active');
        $(this).closest('li').addClass('active');
    });
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top