Question

我正在使用Spring MVC 3.1和Tiles 2.

我有这个瓷砖：

<ul class="nav">
  <li class="active"><a href="/person">Person</a></li>
  <li><a href="/student">Student</a></li>
  <li><a href="/superadmin">Superadmin</a></li>
</ul>

还有tiles.xml：

<tiles-definitions>
    <definition name="base.definition" template="/WEB-INF/pages/tiles/template.jsp">
        <put-attribute name="meta" value="/WEB-INF/pages/tiles/meta.jsp" />
        <put-attribute name="head" value="/WEB-INF/pages/tiles/head.jsp" />
        <put-attribute name="navbar" value="/WEB-INF/pages/tiles/navbar.jsp" />
        <put-attribute name="sidebar" value="/WEB-INF/pages/tiles/sidebar.jsp" />
        <put-attribute name="body" value="" />
        <put-attribute name="footer" value="/WEB-INF/pages/tiles/footer.jsp" />
    </definition>


    <definition name="user.new" extends="base.definition">
      <put-attribute name="body" value="/WEB-INF/pages/user.new.jsp" />
    </definition>

    <definition name="user.show" extends="base.definition">
      <put-attribute name="page_title" value="Tiles tutorial homepage" type="string"/>
      <put-attribute name="section_title" value="User's list" type="string"/>
      <put-attribute name="body" value="/WEB-INF/pages/user.show.jsp" />
    </definition>


    <definition name="login" template="/WEB-INF/pages/login.jsp">
        <put-attribute name="meta" value="/WEB-INF/pages/tiles/meta.jsp" />
        <put-attribute name="head" value="/WEB-INF/pages/tiles/head.jsp" />
        <put-attribute name="body" value="/WEB-INF/pages/login.jsp" />
    </definition>

</tiles-definitions>

现在，我想为所选菜单设置“活动”类。我可以用瓷砖做到吗？或者我必须查看Spring？

Answer 1

方法1 - JSP / JSTL和Spring / Bean

更改菜单图块以使用某个菜单对象列表构建菜单，您可以在会话/模型上设置该列表。菜单对象可以有一个布尔标志，指示在哪一个上设置活动类。

方法2 - JavaScript /会话

如果您不想这样做，可以使用HTML类，JavaScript和会话/模型属性的组合来完成任务。你要做的是重载LI元素的class属性，如：

<ul class="nav">
  <li class="person"><a href="/person">Person</a></li>
  <li class="student"><a href="/student">Student</a></li>
  <li class="superadmin"><a href="/superadmin">Superadmin</a></li>
</ul>

然后你会有一个小JS，使用JSTL来获取类，选择正确的LI元素并设置类。使用jQuery可能看起来像：

$(document).ready(function() {
  $('.${mySelectedClass}').addClass('active');
});

这将使用jQuery选择合适的LI并为其添加“active”类。

方法3 - 使用网址的纯JSTL

如果您不喜欢将菜单与某个属性相关联，并且您知道您的URL在解析时会有一些信息可用于确定哪个LI设置为活动，您可以使用它。您可以获取当前页面的URL，如

<c:out value="${pageContext.request.requestURL}"/>

以某种有意义的方式解析$ {pageContext.request.requestURL}，您可以使用它来确定哪些是有效的。

方法4 - 使用网址的纯JavaScript

与上面相同，但是使用JavaScript获取当前URL，解析它，并像处理方法2中那样操纵DOM。

希望其中一个可以帮到你。

Apache Tiles 2.5 - 将菜单元素标记为活动

1 个答案: