带有 PLAY 框架的 Twitter Bootstrap 将导航栏 <li> 元素设置为活动答案

【问题标题】：Twitter Bootstrap with PLAY framework setting nav bar <li> elements to active带有 PLAY 框架的 Twitter Bootstrap 将导航栏 <li> 元素设置为活动
【发布时间】：2014-05-14 06:54:04
【问题描述】：

您好，我的 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
}

【问题讨论】：

标签： javascript jquery css twitter-bootstrap playframework

【解决方案1】：

您需要使用 e.preventDefault() 来防止锚点的默认操作并在锚点上定位 .click() 处理程序：

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

【讨论】：

哦不！现在该类没有设置为活动状态，但 ahref 不会在单击时重定向到新页面
我真的不明白你在这里想要做什么？如果您想将用户重定向到另一个页面，那么突出显示 li 元素有什么意义？
所以我想做的是我有一个 main.scala.html，它有页眉、导航栏和页脚，每个页面的内容将在单独的 scala.html 页面中