• ...">
    Geek asks and answers

    Apache Tiles 2.5 - mark a menu item as active

    I am using Spring MVC 3.1 and Tiles 2.

    I have this tile:

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

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

    Now I want to set the class "active" for the selected menu. Can I do this with Tiles? Or do I need to look for Spring?

    +5
    source share
    1 answer

    Approach 1 - JSP / JSTL and Spring / Bean

    Change your menu tile to create a menu using a list of some menu objects that you can set on a session / model. A menu object may have a boolean flag indicating which one should include the active class.

    Approach 2 - JavaScript / Session

    , HTML-, JavaScript /, . , LI, :

    <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 - JSTL URL

    , , URL-, , , , , LI , . URL ,

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

    Parse ${pageContext.request.requestURL} - , , .

    4 - JavaScript URL

    , , JavaScript, URL-, DOM, 2.

    , .

    +8

    More articles:


    All Articles