获取一页引导网站的动态活动 li答案

【问题标题】：Getting dynamic active li for one page bootstrap website获取一页引导网站的动态活动 li
【发布时间】：2016-09-01 14:31:43
【问题描述】：

我想在当前页面上有li 的动态属性active。我看到了这个主题：How to get Twitter-Bootstrap navigation to show active link?，但解决方案对我不起作用。我没有用于局部视图的特定控制器。方法 current_page 不适用于 href。我不使用定义的路由，这就是为什么没有link_to。

我尝试使用 data-toggle="pills"，在导航栏上正确标记当前点击了一个链接，但没有参考（未更改视图）。

    li
      a.waves-effect.waves-light href="#{root_path}#slider" Home
    li
      a.waves-effect.waves-light href="#{root_path}#about" About us
    li
      a.waves-effect.waves-light href="#{root_path}#price" Price
    li
      a.waves-effect.waves-light href="#{root_path}#contact" Contact

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap slim-lang

【解决方案1】：

Twitter 引导选项卡默认为“单页”，在您的情况下应该立即工作。检查你的父母<ul>。您的代码应如下所示：

<ul class="nav nav-tabs">
  <li class="active waves-effect waves-light">
    <a href="#slider" data-toggle="tab">Home</a>
  </li>
  <li class="waves-effect waves-light">
    <a href="#about" data-toggle="tab">About us</a>
  </li>
  <li class="waves-effect waves-light">
    <a href="#price" data-toggle="tab">Price</a>
  </li>
  <li class="waves-effect waves-light">
    <a href="#contact" data-toggle="tab">Contact</a>
  </li>
</ul>

注意：您的链接中不需要root_path，因为这实际上会打开一个新页面，而您不希望这样做，因为您的链接是单页

【讨论】：