$('#menu').find('a').each(function(){
if (this.href == document.location.href || document.location.href.search(this.href) >= 0) {
$(this).addClass('active'); // this.className = 'active';
}
});
pathname = window.location.pathname.split('/')[1];
if(pathname) {
jQuery('.mainNav li.' + pathname).addClass('active');
} else {
jQuery('.mainNav li.home').addClass('active');
}
我一般用这两种做法
- 若这组 url 遵循比较统一的规则，则写一个 Helper 方法，根据 url 或者 controller/action 名字返回是否 active 的 css class
- 若 url 规则比较乱，则在各自的 action 代码中赋值某个变量，如@active_page_a='active' 然后在页面中写上 class="@active_page_a"
hungyuhei
#10
2012年08月16日
有时用 #7 楼 的方法，如果是多栏的话，为了减少 if 语句，我会这样
<% current = { action_name => 'active' } %>
<%= link_to xxx, xxx, :class => current['home'] %>
<%= link_to yyy, yyy, :class => current['index'] %>
zhangyuan
#19
2012年11月05日
我是写一个数组，作为配置，每一项有个名字；然后再写个方法渲染导航，在每个页面，使用不同的名字来调用。不过不太 OOP。
有个 Gist： https://gist.github.com/4015104
lvjian700
#22
2012年11月05日
Rails 中的方式不太熟悉. 使用 body 标签的 id 做高亮，纯 css/html:
css 代码：css/app.css
#home ul.nav li a.home,
#contact ul.nav li a.contact,
#about ul.nav li a.about {
/*高亮代码*/
}
Home Page:
<link ref="stylesheet" href="css/app.css" />
<body id="home">
<ul class='nav'>
<li><a href="" class='home'> Home </a></li>
<li><a href="" class='contact'> Contact </a></li>
<li><a href="" class='about'> About </a></li>
</ul>
</body>
Contact Page:
<link ref="stylesheet" href="css/app.css" />
<body id="contact">
<ul class='nav'>
<li><a href="" class='home'> Home </a></li>
<li><a href="" class='contact'> Contact </a></li>
<li><a href="" class='about'> About </a></li>
</ul>
</body>
About Page:
<link ref="stylesheet" href="css/app.css" />
<body id="about">
<ul class='nav'>
<li><a href="" class='home'> Home </a></li>
<li><a href="" class='contact'> Contact </a></li>
<li><a href="" class='about'> About </a></li>
</ul>
</body>
