How to change active nav link with bootstrap

Question

I've been using http://www.layoutit.com/ to quickly create a UI with bootstrap 3.

The default example has a nav bar with two links. The example sets the first link as active.

        <nav class="navbar navbar-default" role="navigation">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">Link</a>
                    </li>
                    <li>
                        <a href="#">Link</a>
                    </li>
                </ul>                       
            </div>              
        </nav>

With bootstrap, what is the best approach to changing the active link, when I click the link?

Is there somes javascript that I need to add to the link itself?

If you're using `Link` that links to `New Page` then you'll have to apply the `class ="active"` to the specific `li` element of that page. — Tushar Khatiwada, Sep 23 '15 at 15:46
Best way was deleted by the user who answered here. Here is the code he posted: http://jsfiddle.net/wgrx5rz7/1/ — m4n0, Sep 23 '15 at 15:54
Thanks the JS from that jsfiddle, worked in that the active link now changes. But the link itself doesn't seem to work i.e. when I click on it, it doesn't go to the new URL. — Dave, Sep 23 '15 at 16:16

score 1 · Accepted Answer · edited May 23 '17 at 11:44

If your website has different HTML pages and you are just using HTML CSS Bootstrap.. then here's what you'll have to do:

page1.html

<nav class="navbar navbar-default" role="navigation">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="page1.html">Page 1</a>
                    </li>
                    <li>
                        <a href="page2.html">Page 2</a>
                    </li>
                </ul>                       
            </div>              
        </nav>

page2.html

<nav class="navbar navbar-default" role="navigation">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="page1.html">Page 1</a>
                    </li>
                    <li class="active">
                        <a href="page2.html">Page 2</a>
                    </li>
                </ul>                       
            </div>              
        </nav>

UPDATE

For dynamic pages, like you mentioned that you're using Ruby on Rails, this solution might work : Dynamically add active class to bootstrap li in Rails

Thanks. In this case I'm using a rails app, so I have the header in my application.htlm.erb. I placed it here, because I wanted to share the navbar across all views. — Dave, Sep 23 '15 at 16:10
@Dave This might help you: http://stackoverflow.com/questions/17481812/dynamically-add-active-class-to-bootstrap-li-in-rails — Tushar Khatiwada, Sep 23 '15 at 16:19

How to change active nav link with bootstrap

1 Answers1