How to change the class attribute of a selected item in the navigation bar

advertisements

I'm using twitter bootstrap with grails and have the following in my layout:

        <div class="nav-collapse">
            <ul class="nav">
                <li><a href="${createLink(uri: '/request/new')}">My Link</a></li>
            </ul>
        </div>

On my page I have the following:

<html>
    <head>
        <meta name="layout" content="bootstrap">
    </head>

    <body>
        sometext
    </body>
</html>

Question

In my layout how do I detect when the My Link action is clicked? so that I can highlight it using class="active"


Here is how I tend to do this.

First, in your layout, you would do something like this:

<div class="nav-collapse">
    <ul class="nav">
        <li class="${ pageProperty(name:'meta.nav').equals( 'foo' ) ? 'active' : null }"><a href="${createLink(uri: '/request/new')}">My Link</a></li>
    </ul>
</div>

And in your page:

<html>
    <head>
        <meta name="layout" content="bootstrap">
        <meta name="nav" content="foo"/>
    </head>

    <body>
        sometext
    </body>
</html>

foo is the trigger to apply the .active class.