采用棘轮框架

棘轮移动框架切换活动类使用底部按钮结构，看起来像这样：采用棘轮框架

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

我不希望它仅仅是最后一个按钮按下，因为有其他的方式来导航回到应用程序的主要部分，它看起来怪异有一个按钮，显示积极的，如果他们的内容在看是完全无关的。

感谢您的任何帮助。

来源

2013-11-28 bradhanks

看看emberJS

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

有了这个语法，基于路由当前选项卡中设置为主动

来源

2014-03-01 23:14:48 user3369534

采用棘轮框架

回答

相关问题