Javascript 使用Ratchet框架切换活动类

Ratchet mobile framework使用的底部按钮结构如下所示：

<nav class="bar-tab">
 <ul class="tab-inner">
<li class="tab-item active">
  <a href="#">
    <img class="tab-icon" src="img/icon-messages.png">
    <div class="tab-label">Label</div>
  </a>
</li>
<li class="tab-item">
  <a href="#">
    <img class="tab-icon" src="img/icon-hamburger.png">
    <div class="tab-label">Label</div>
  </a>
</li>
<li class="tab-item">
  <a href="#">
    <img class="tab-icon" src="img/icon-settings.png">
    <div class="tab-label">Label</div>
  </a>
</li>

我正在尝试使用JS来更改任何一个被单击的活动选项卡。我试图采取的方法是以下逻辑

如果站点所在的页面与href链接相同，则显示该链接处于活动状态

<script language="JavaScript">
var sPath=window.location.pathname;
 var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
$('.bar-tab li.tab-inner').click(function() {

$(".active").removeClass("active");
$(this).parent().toggleClass('active', $(this).attr('href') == sPage);

 });

 </script>

var sPath=window.location.pathname；
var sPage=sPath.substring（sPath.lastIndexOf（'/'）+1）；
$（'.bar选项卡li.tab内部'）。单击（函数（）{
$（.active”）.removeClass（“active”）；
$（this.parent（）.toggleClass（'active'，$（this.attr（'href'）==sPage）；
});

我不希望它只是最后一个被点击的按钮，因为有其他方法可以导航回应用程序的主要部分，如果他们正在查看的内容完全无关，那么如果有一个按钮显示为活动状态，这看起来会很奇怪

谢谢你的帮助。

看看emberJS

  {{#link-to 'index' classNames='tab-item'}}
    <span class="icon icon-list"></span>
    <span class="tab-label">Oversigt</span>
  {{/link-to}}

{{#链接到'index'classNames='tab-item'}
超限
{{/链接到}

使用此语法，根据路由，当前选项卡设置为活动