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

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

题

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
}
有帮助吗？

解决方案

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');
    });
});
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top