6

我正在使用 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>

现在，我想为所选菜单设置“活动”类。我可以用 Tiles 做到这一点吗？还是我必须抬头看春天？

4

1 回答 1

8

方法 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 并向其添加“活动”类。

方法 3 - 使用 URL 的纯 JSTL

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

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

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

方法 4 - 使用 URL 的纯 JavaScript

与上面相同，但使用 JavaScript 获取当前 URL，对其进行解析，并像我们在方法 2 中那样操作 DOM。

希望其中之一对您有所帮助。

于 2013-03-13T13:59:49.157 回答