如何更改所选项目的类属性的导航栏

我使用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"

来源

2013-01-03 birdy

下面是我倾向于这样做的方式。

首先，在你的布局，你会做这样的事情：

<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类扳机。

来源

2013-01-03 22:09:46 Gregg

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

顺便说一句，我建议你使用g:link，而不是g:createLink它是可能的。在这里：

<div class="nav-collapse"> 
     <ul class="nav"> 
      <li ${controllerName == 'request' && actionName == 'new' ? 'class="active"' : ''}><g:link controller="request" action="new">My Link</g:link></li> 
     </ul> 
    </div>

来源

2013-01-03 23:38:28 Isammoc

更改您的布局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>

来源

2013-01-04 02:26:45 coderLMN

这应该工作（注意，这是略有不同，Isammoc的答案）

<li class="${controllerName == 'user' && actionName == 'profile' ? 'active' : ''}"> profile </li>

来源

2014-12-24 22:30:37 ascoppa

你能否给一些洞察到它是如何不同为什么？ – rapvelopment

如何更改所选项目的类属性的导航栏

回答

相关问题