CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Jack
Jack

Reputation: 513

How to check in jQuery if a Bootstrap tab isn't clicked?

I have tabs in Bootstrap:

<ul class="nav nav-tabs" role="tablist">
  <li>tab1</li>
  <li>tab2</li>
  <li>tab3</li>
  <li>tab4</li>
  <li>tab5</li>
</ul>

<p id="message"></p>

How can I make it so that when no tab is clicked a message 'Please select a tab' is shown?

I have made a <p id="message"></p> underneath the tabs, I just need to insert the message when no tab is clicked and remove the message when a tab is clicked but I'm not sure how to check.

Upvotes: 2

Views: 3041

Answers (4)

Rajan Goswami
Rajan Goswami

Reputation: 769

In BootStrap when a tab is clicked the the corresponding li element gets an active class, while the other li tags don't have this class until clicked.

You can use the following code to check if any tab is clicked:

$(function(){
    CheckTabClick()
})

$(".nav-tabs li").click(function(){
    CheckTabClick()
})

function CheckTabClick(){
  var tab_clicked = $(".nav-tabs li.active")

  if (tab_clicked.length == 0){
      $("#message").show();
  }
    else{
     $("#message").hide();
    }
}

Upvotes: 0

sach
sach

Reputation: 271

The bootstrap has 'shown.bs.tab' event to capture if the tab is clicked. you can make use of it as shown below.

$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
   console.log(e.target) // activated tab
})

Upvotes: 1

AdityaParab
AdityaParab

Reputation: 7100

The solution @dfsq has posted is more elegant as compared to what follows. However, if your situation doesn't allow you to change your HTML markup, here is another way to do it.

var selectedTab = $('.nav-tabs li.active');

if(selectedTab.length === 0){
    $('#message').html('Please select tab');
}

Upvotes: 1

dfsq
dfsq

Reputation: 193261

For Bootstrap tabs you also need content containers. In this case I would put message div into tab-content div:

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
    <p id="message">Please select some tab</p>
</div>

... and make it hide in case anything is selected with simple CSS rule:

.tab-pane.active ~ #message {
    display: none;
}


.tab-pane.active ~ #message {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation"><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>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane" id="home">Home</div>
  <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
  <div role="tabpanel" class="tab-pane" id="messages">Messages</div>
  <p id="message">Please select some tab</p>
</div>

Demo: http://plnkr.co/edit/1VaF3NoTRK4X2pnd651G?p=info

Upvotes: 5

Related Questions