0

Ratchet 移动框架使用如下所示的底部按钮结构：

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

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

谢谢你的帮助。

4

1 回答 1

0

看看 emberJS

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

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

于 2014-03-01T23:14:48.813 回答