Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <ul class="nav nav-list" id="sampleTabs">
- <li><a href="#example" data-toggle="tab">Tab 1</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane fade active in" id="example">
- Example Tab
- </div>
- </div>
- <script>
- $('#sampleTabs a:first').tab('show');
- </script>
- $("ul#sampleTabs li.active")
- var activeTab = null;
- $('a[data-toggle="tab"]').on('shown', function (e) {
- activeTab = e.target;
- })
- // tab
- $('#rowTab a:first').tab('show');
- $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
- //show selected tab / active
- console.log ( $(e.target).attr('id') );
- });
- <ul class='nav nav-tabs'>
- <li class='active'><a href='#home'>Home</a></li>
- <li><a href='#menu1'>Menu 1</a></li>
- <li><a href='#menu2'>Menu 2</a></li>
- <li><a href='#menu3'>Menu 3</a></li>
- </ul>
- <div class='tab-content'>
- <div id='home' class='tab-pane fade in active'>
- <h3>HOME</h3>
- <div id='menu1' class='tab-pane fade'>
- <h3>Menu 1</h3>
- </div>
- <div id='menu2' class='tab-pane fade'>
- <h3>Menu 2</h3>
- </div>
- <div id='menu3' class='tab-pane fade'>
- <h3>Menu 3</h3>
- </div>
- </div>
- </div>
- <script>
- $(document).ready(function(){
- // Handling data-toggle manually
- $('.nav-tabs a').click(function(){
- $(this).tab('show');
- });
- // The on tab shown event
- $('.nav-tabs a').on('shown.bs.tab', function (e) {
- alert('Hello from the other siiiiiide!');
- var current_tab = e.target;
- var previous_tab = e.relatedTarget;
- });
- });
- </script>
Add Comment
Please, Sign In to add comment