2

私はPlayFrameworkアプリケーションを持っており、フロントエンドにTwitterブートストラップを使用しています。

ナビゲーションバーには、以下に示す4つのオプションがあります。

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

「ホーム」または「サインアップ」ページに移動すると、これらのオプションがナビゲーションバーでアクティブになります。私の問題は、ドロップダウンバーからオプションを選択するたびに、[ホーム]ボタンがアクティブなままになることです。「JourneyManagement」オプションをアクティブにしたいのですが、ドロップダウンメニューでこれを行う方法がわかりません。

そこで、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

タグに含めることができる属性は1つだけclassなので、次を使用する必要があります。

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

それはあなたに望ましい結果を与えるでしょう。

于 2012-11-20T11:27:51.690 に答える
1

@main("Journey Creator", "journeys") {そのため、この質問に関係する.scala.htmlファイルに「journeys」引数を含めることを愚かに無視しました。これを追加すると、ナビゲーションの問題が解決します。

于 2012-11-26T13:38:35.727 に答える