0

Web サイトのメニュー バーに CSS クラスを動的に割り当てたい

Header.jsp ファイル

 <div class='menuArea'>
         <ul>

            <li class="current"><s:a action="listUsers">Users</s:a></li>
            <li><s:a action="listCustomers">Customers</s:a></li>
            <li><s:a action="searchItems">Items</s:a></li>

        </ul>
    </div>

クラス「current」は最初のli要素に適用され、静的ですが、選択したページに応じて動的にしたいです。

<s:include value="header.jsp"/>他の JSP にヘッダーを含めるために使用されます。

4

2 に答える 2

1

<s:include>タグ付きのパラメータを渡すのはどうですか。

<s:include value="header.jsp">
  <s:param name="currentmenu" value="'page_id'" />
</s:include>

次に、表記をheader.jsp使用して取得パラメーターで、それを変数に設定します。この変数をタグ内で使用して、クラスを要素に設定できます。${param.your_param_name}<s:if>

<s:set name="curr">
  ${param.currentmenu}
</s:set>

<ul>
  <li <s:if test="#curr == 'first_page_id'">class="current"</s:if> >
    <s:a action="listUsers">Users</s:a>
  </li>
  <li <s:if test="#curr == 'second_page_id'">class="current"</s:if> >
    <s:a action="listCustomers">Customers</s:a>
  </li>
  <li <s:if test="#curr == 'third_page_id'">class="current"</s:if> >
    <s:a action="searchItems">Items</s:a>
  </li>
</ul>
于 2013-01-17T09:49:12.467 に答える
0

header.jsp で、javascript にデフォルトの変数を設定します。

<script>var currPage = "Users";</script>

次に、メイン ページ (できれば下部) で、オーバーライドします。

<script>currPage = "Customers";</script>

次に、フッターに jquery を追加します。

    $("ul.menuArea > li").each(function(i, v){
     var $obj = $(this);
     if(currPage === $obj.find("a:first").text()){
      $obj.addClass("current");
      return false;
     }
    });

フィドル: http://jsfiddle.net/kydun/

于 2013-01-16T19:22:00.357 に答える