2

我有一个播放框架应用程序，我正在使用 twitter bootstrap 作为前端。

在我的导航栏中，我有四个选项，如下所示。

      <div class="nav-collapse">
        <ul class="nav">
          <li class="@("active".when(nav == ""))"><a href="@routes.Application.index()">@Messages("playauthenticate.navigation.home")</a></li>
          <li class="@("active".when(nav == "restricted"))"><a href="@routes.Application.restricted()">@Messages("playauthenticate.navigation.restricted")</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Journey Management<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="@routes.Application.createJourney()"><i class="icon-plus-sign"></i>@Messages("journeys.dropdown.option1")</a></li>
              <li><a href="@routes.Application.Todo()"><i class="icon-calendar"></i>@Messages("journeys.dropdown.option2")</a></li>
              <li><a href="@routes.Application.Todo()"><i class="icon-star"></i>@Messages("journeys.dropdown.option3")</a></li>
            </ul>
          </li>

            @if(!Deadbolt.viewRoleHolderPresent()) {
                <li class="@("active".when(nav == "signup"))"><a href="@routes.Application.signup()">@Messages("playauthenticate.navigation.signup")</a></li>
            }
        </ul>
      </div>

当我导航到“主页”或“注册”页面时，这些选项在导航栏上变为活动状态。我的问题是，每当我从下拉栏中选择一个选项时，“主页”按钮都会保持活动状态。我希望“旅程管理”选项处于活动状态，但我不确定如何使用下拉菜单执行此操作。

所以我对HTML做了以下修改。

 <li class="@("active".when(nav == "journeys")) dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Journey Management<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="@routes.Application.createJourney()"><i class="icon-plus-sign"></i>@Messages("journeys.dropdown.option1")</a></li>
              <li><a href="@routes.Application.Todo()"><i class="icon-calendar"></i>@Messages("journeys.dropdown.option2")</a></li>
              <li><a href="@routes.Application.Todo()"><i class="icon-star"></i>@Messages("journeys.dropdown.option3")</a></li>
            </ul>
          </li>

当我从“旅程管理”下拉列表中选择一个选项时，在本例中，“创建旅程”页面（它是唯一具有操作的页面）本地地址是http://localhost:9000/journeys所以我在旅程应用程序路由中调用一个方法。但是导航栏上的主页链接保持活动状态，而导航栏上的旅程管理下拉菜单保持非活动状态。

描述问题的屏幕截图

这是加载页面的来源：

这是来自实际页面的 HTML 

<div class="nav-collapse">
    <ul class="nav">
      <li class="active"><a href="/">Home</a></li>
      <li class=""><a href="/restricted">Restricted page</a></li>
      <li class=" dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Journey Management<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="/journeys"><i class="icon-plus-sign"></i>Create a Journey</a>       </li>
          <li><a href="/TODO"><i class="icon-calendar"></i>View all Journeys</a></li>
          <li><a href="/TODO"><i class="icon-star"></i>View saved Journeys</a></li>
        </ul>`
4

2 回答 2

1

所以我愚蠢地忽略了@main("Journey Creator", "journeys") {在这个问题涉及的 .scala.html 文件中包含“journeys”参数。添加此解决导航问题。

于 2012-11-26T13:38:35.727 回答
1

标签中只能有一个class属性，因此必须使用：

<li class="@("active".when(nav == "journeys")) dropdown">

这会给你想要的结果。

于 2012-11-20T11:27:51.690 回答