Getting dynamic active li for one page bootstrap website

Question

I want to have dynamic attribute active for li on a current page. I saw this topic:How to get Twitter-Bootstrap navigation to show active link?, but solutions not working for me. I don't have specific controllers for partials views. Method current_page doesn't work with href. I don't use defined routes, that's why don't have link_to.

I tried to use data-toggle="pills", correctly marks on navbar current clicked a link, but not reference(not changed view).

    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

Answer 1

Twitter Bootstrap Tabs are by default "single-page", and should work immediately in your case. Check you parent <ul>. Your code should be like the following:

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

Note: You do not need root_path in your links because that will essentially open a new page, and you do not want that because yours is a single-page