javascript - How to check in jQuery if a Bootstrap tab isn't clicked? - Stack Overflow

admin管理员组

文章数量:1406951

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.

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.

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Aug 3, 2015 at 7:55 Jack asked Aug 3, 2015 at 7:52 JackJack 51311 gold badge55 silver badges1818 bronze badges 3

• What is <li ...>? Post normal HTML. – dfsq Commented Aug 3, 2015 at 7:55
• At least one tab will be active in the beginning right? how can you say there won't be any tab active? – Guruprasad J Rao Commented Aug 3, 2015 at 7:56
• Because no tabs have "active"? – Jack Commented Aug 3, 2015 at 7:59

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn./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

The solution @dfsq has posted is more elegant as pared 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');
}

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
})

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();
    }
}

本文标签： javascriptHow to check in jQuery if a Bootstrap tab isn39t clickedStack Overflow