0

我想将 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 回答