如何使用javascript突出显示活动菜单？

Question

我使用下面的脚本突出显示twitter bootstrap中的活动菜单。

/* This is cool it sets the right navbar element active */
$(document).ready(function () {
    $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});

上面脚本的bootstrap html看起来像这样：

<ul class="nav navbar-nav navbar-right">

    <li><a href="/">Home</a></li>
    <li> <a href="/about/">About</a></li>
    <li> <a href="/articles/">Articles</a></li>

</ul>

如果网址是，请说：

example.com/articles/

效果很好，文章菜单项突出显示

但是，如果网址是：

example.com/articles/cars
example.com/articles/cars/
example.com/articles/cars/mini

它不再将文章菜单项设置为活动状态。

我有什么想法可以让它为儿童用品设置菜单项？

**更新**

我目前在开发箱上，我的网址如下：

http://192.168.0.100:8001/about/
http://192.168.0.100:8001/articles/
http://192.168.0.100:8001/articles/cars/