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