CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
thedeepfield
thedeepfield

Reputation: 6196

Switch active tab with Bootstrap's Navbar

I'm using Bootstrap's navbar for a website. I've separated the navbar into its own HTML page. When any page is loaded, it will load the navbar.html page with JQuery. When a user clicks on say, page2, the "Home" link is still shown as active when it should be "Page2".

Is there a simple way to switch the class for the page2 link to "active" using javascript, jquery or bootstrap magic?

navbar.html

<ul class="nav">
    <li class="active"><a href="#l">Home</a></li>
    <li><a href="#">page2</a></li>
<li><a href="#">page3</a></li>
</ul>

jquery on page2

<script>
    jQuery(function(){
        $('#nav').load('nav.html');
    });

    jQuery(function(){
        $('.nav a:contains("page2")').addClass('active');
    });
</script>

Upvotes: 2

Views: 12565

Answers (5)

Ilya
Ilya

Reputation: 21

Use this: $('.nav a:contains("page2")').tab('show');

Upvotes: 2

Dmitry Efimenko
Dmitry Efimenko

Reputation: 11203

in case your server side technology is asp.net-mvc, you might find this answer useful.

Upvotes: -1

Greg Swindle
Greg Swindle

Reputation: 23

For what it's worth, I'm using Backbone with Bootstrap, and here's my solution (with variables renamed for clarity):

var AppRouter = Backbone.Router.extend({
routes: {
    '':                 'list',
    'menu-items/new':   'itemForm',
    'menu-items/:item': 'itemDetails',
    'orders':           'orderItem',
    'orders/:item':     'orderItem'
},

initialize: function  () {
    // [snip]

    this.firstView = new FirstView();
    this.secondView = new SecondView();
    this.thirdView = new ThirdView();

    this.navMenu = {
        firstViewMenuItem:  $('li#first-menu-item'),
        secondViewMenuItem: $('li#second-menu-item'),
        thirdViewMenuItem:  $('li#third-menu-item'),
        reset:              function() {
            _.each(this, function(menuItem) {
                if (!_.isFunction(menuItem) && menuItem.hasClass('active')) {
                    menuItem.removeClass('active');
                    return true;
                }
            });
            return this;
        }
    };
},
// [snip]

Within my router callbacks, I remove any existing 'active' menu classes and set the selected to 'active', e.g.,

// [snip]
list: function () {
    $('#app').html(this.firstView.render().el);
    this.navMenu.reset().firstViewMenuItem.addClass('active');
},
// [snip]

Upvotes: 1

thedeepfield
thedeepfield

Reputation: 6196

So the issue was that the navbar content was being loaded as a separate file onto page2 and the .addClass was on page2. it could not find the html tags. In order to get the navbar to show the active link, I put $('.nav a:contains("page2")').parent().addClass('active'); with my code to load the navbar:

Page2:

<script>
jQuery(function(){
    $('#nav').load('nav.html', function() {
        $('.nav a:contains("Home")').parent().addClass('active');
    })
});
</script>

Upvotes: 1

Alex
Alex

Reputation: 35409

Using jQuery:

$('.nav a:contains("page2")').addClass('active');

Or, to add the class to the parent element (li):

$('.nav a:contains("page2")').parent().addClass('active');

Live Example:

http://jsfiddle.net/BDTnj/

Upvotes: 6

Related Questions