javascript - How to hide an element when certain tabs is shown - Stack Overflow

admin管理员组

文章数量:1415139

I am using Twitter Bootstrap, and had successfully implemented the tabs. I have a button that should display on all the tabs except for one, any idea how should I do that?

<div class="span6 offset1"> 
  <div class="tabbable">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#general" data-toggle="tab">General</a></li>
      <li><a href="#example2" data-toggle="tab">Example2</a></li>
      <li><a href="#example3" data-toggle="tab">Example3</a></li>
    </ul>

    <div class="tab-content">
      <div id="general" class="tab-pane fade in active" >
       //content
      </div>
      <div id="example2" class="tab-pane fade" >
       //content
      </div>
      <div id="example3" class="tab-pane fade" >
       //content
      </div>
    </div>
 </div> 
 <input type="submit" style="width:120px" class='btn btn-primary' id="update" value="Update"/> 
</div>

How do I program it such that when tab example3 is shown, the update button will be hidden, but still remains on page when tab general and example2 is shown.

Thanks!

I am using Twitter Bootstrap, and had successfully implemented the tabs. I have a button that should display on all the tabs except for one, any idea how should I do that?

<div class="span6 offset1"> 
  <div class="tabbable">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#general" data-toggle="tab">General</a></li>
      <li><a href="#example2" data-toggle="tab">Example2</a></li>
      <li><a href="#example3" data-toggle="tab">Example3</a></li>
    </ul>

    <div class="tab-content">
      <div id="general" class="tab-pane fade in active" >
       //content
      </div>
      <div id="example2" class="tab-pane fade" >
       //content
      </div>
      <div id="example3" class="tab-pane fade" >
       //content
      </div>
    </div>
 </div> 
 <input type="submit" style="width:120px" class='btn btn-primary' id="update" value="Update"/> 
</div>

How do I program it such that when tab example3 is shown, the update button will be hidden, but still remains on page when tab general and example2 is shown.

Thanks!

• javascript
• twitter-bootstrap

Share Improve this question Follow edited Feb 27, 2020 at 17:39 isherwood 61.2k1616 gold badges122122 silver badges170170 bronze badges asked Apr 19, 2012 at 9:39 revolverrevolver 2,40555 gold badges2525 silver badges4040 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I am not sure that is there any event being fired in bootstrap tabs. But the simplest way can be to use mouseclick event on example3 link or even you can try to trigger custom event.

$('a[href="#example3"]').on('click',function(){
 $("#update").hide();
});

use .style.display = 'none'

e.g.

document.getElementById(id).style.display = 'none';

本文标签： javascriptHow to hide an element when certain tabs is shownStack Overflow