Twitter Bootstrap with PLAY框架设置导航栏<元素激活

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

本文关键字：元素 激活 导航 with Bootstrap PLAY 框架 设置 Twitter      更新时间：2023-09-26

你好，我有一个导航条在我的home.scala.html如下-

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

我正在尝试设置激活类点击如下-

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

然而，在运行应用程序时，只有具有href="#"的li元素被设置为活动，其他li元素在点击时保持不活动，即使页面被重定向到标签的链接。任何帮助都会很感激。由于

编辑:main.scala.html的结构是 
    <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
}

您需要使用e.p preventdefault ()来防止锚和目标.click()处理程序在锚上的默认操作:

$(document).ready(function () {
    $('ul.nav > li a').click(function (e) {
        e.preventDefault();
        $('ul.nav > li').removeClass('active');
        $(this).closest('li').addClass('active');
    });
});
相关文章：