Grails 如何更改导航栏中选定项目的类属性_Grails_Twitter Bootstrap

Grails 如何更改导航栏中选定项目的类属性

grails twitter-bootstrap

Grails 如何更改导航栏中选定项目的类属性,grails,twitter-bootstrap,Grails,Twitter Bootstrap,我将twitter引导与grails一起使用，在我的布局中有以下内容： <div class="nav-collapse"> <ul class="nav"> <li><a href="${createLink(uri: '/request/new')}">My Link</a></li> </ul>

我将twitter引导与grails一起使用，在我的布局中有以下内容：

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

在我的页面上，我有以下内容：

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

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


一些文字

问题

在我的布局中，我如何检测何时单击了

my Link

操作？因此，我可以使用

class=“active”

突出显示它。下面是我的操作方法

首先，在布局中，您将执行以下操作：

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

在您的页面中：

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

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


一些文字

foo

是应用

.active

类的触发器。

以下是我的做法

首先，在布局中，您将执行以下操作：

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

在您的页面中：

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

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


一些文字

foo

是应用

.active

类的触发器。

使用actionName和controllerName来了解您正在执行的操作

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

使用actionName和controllerName了解您正在执行的操作

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

将布局gsp更改为：

<div class="nav-collapse">
    <ul class="nav">
        <li onclick="javascript: this.setAttribute("class","active");">
            <g:remoteLink controller='request' action='new' update='data'>My Link</g:remoteLink>
        </li>
    </ul>
</div>
<div id="data">
    <g:layoutBody />
</div>




我的链接

将布局gsp更改为：

<div class="nav-collapse">
    <ul class="nav">
        <li onclick="javascript: this.setAttribute("class","active");">
            <g:remoteLink controller='request' action='new' update='data'>My Link</g:remoteLink>
        </li>
    </ul>
</div>
<div id="data">
    <g:layoutBody />
</div>




我的链接

这应该行得通（注意它与Isammoc的答案略有不同）

profile

这应该行得通（注意它与Isammoc的答案略有不同）

profile

您能深入了解它的不同之处以及原因吗？您能深入了解它的不同之处以及原因吗？