Make Current Div Change Relevant Menu Tab To Active

In my mobile project I can press a menu tab (Tab2) and the tab becomes active (with background color for the active class) and the corresponding div (Div2) below will appear on the

Solution 1:

As I commented above, you are doing same thing in all the conditions. All you need to do is, to activate the navigation item by index you are getting from carousel. Try this:

$('#carousel-example-generic').on('slid.bs.carousel', function () {

    var savedIndex = $(this).find('.active').index();

    $('.nav-pills>li:eq(' + savedIndex + ')>a').css('background', 'yellow');
});

EDIT:

I would recommend to play with a CSS class instead of inline css. Try this:

$('#carousel-example-generic').on('slid.bs.carousel', function () {

    var savedIndex = $(this).find('.active').index();

    $('.nav-pills>li:eq(' + savedIndex + ')>a')
        .addClass("active") // add active class to the current one
        .parent().siblings() // select sibling navigation items
        .removeClass("active"); // remove active class from the other navigations
});

Solution 2:

You conveniently already have classnames "tab1", "tab2", "tab3" on the tabs, which can be matched easily based on savedIndex:

$('#carousel-example-generic').on('slid.bs.carousel', function() {
  $('.nav li').removeClass('active'); // clear the old onevar savedIndex = $(this).find('.active').index();
  $('.tab'+ (savedIndex+1)).addClass('active'); // add the new one
});

(I believe index() returns an integer, but if not you may need to parseInt it before adding 1.)