Question

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

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

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

感谢您的帮助。

Answer 1

看看emberJS

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

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

使用Ratchet框架切换活动类

1 个答案: