Question

我想动态地将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中包含标头。

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

Answer 2

在header.jsp中

，在javascript中设置默认var：

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

动态地将CSS类分配给网站菜单栏struts2

2 个答案: