CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3
Ɛɔıs3
Ɛɔıs3

Reputation: 7853

Disable the link on the active tab (Bootstrap)

I use tabs via Bootstrap. I can't reach my goals for this problem. Imagine a simple case such as the example below. When I click on a tab, the content is displayed, it is perfect.

Now assume that the content to load resource intensive and is long to arrive (eg a large SQL query), I don't want when I click again on the same tab, the content is recharging.

However, I can't produce it. The example below illustrates my problem, because if you re-click on the tab, we see that the background changes anyway, so I wouldn't change it.

The HTML :

<div role="tabpanel">

  <ul class="nav nav-tabs" role="tablist" id="myTab">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <div class="tab-content text-center">
    <div role="tabpanel" class="tab-pane active" id="home"><p><i class="fa fa-refresh fa-spin"></i> HOME </p></div>
    <div role="tabpanel" class="tab-pane" id="profile"><p><i class="fa fa-refresh fa-spin"></i> PROFILE </p></div>
    <div role="tabpanel" class="tab-pane" id="messages"><p><i class="fa fa-refresh fa-spin"></i> MESSAGES </p></div>
    <div role="tabpanel" class="tab-pane" id="settings"><p><i class="fa fa-refresh fa-spin"></i> SETTINGS </p></div>
  </div>

</div>

And the associated jQuery is just that the documentation provided by Bootstrap $('#myTab a').tab('show');

Please look at this JSFIDDLE

So how to disable the tab when it is active?

Upvotes: 0

Views: 1518

Answers (2)

kapantzak
kapantzak

Reputation: 11750

Check the DEMO

$(document).ready(function(){    
    $('#myTab a').tab('show');    
    $('#myTab a').click(function(){
        if (!$(this).closest('li').hasClass('active')) {
        $('.tab-content').css('background', '#' + random_colour());
        }
    });
});

Upvotes: 2

SimarjeetSingh Panghlia
SimarjeetSingh Panghlia

Reputation: 2200

Fiddle Demo

$(document).ready(function(){    
    $('#myTab a').tab('show');    
    $('#myTab a').click(function(){
        if(!($(this).parent("li").hasClass("active")))
        {
            $('.tab-content').css('background', '#' + random_colour());
        }

    });
});

function random_colour(){
    return Math.floor(Math.random()*16777215).toString(16);
}

Upvotes: 1

Related Questions