Guest User

Untitled

a guest
Nov 12th, 2018
85
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.51 KB | None | 0 0
  1. <ul class="nav nav-list" id="sampleTabs">
  2. <li><a href="#example" data-toggle="tab">Tab 1</a></li>
  3. </ul>
  4. <div class="tab-content">
  5. <div class="tab-pane fade active in" id="example">
  6. Example Tab
  7. </div>
  8. </div>
  9.  
  10. <script>
  11. $('#sampleTabs a:first').tab('show');
  12. </script>
  13.  
  14. $("ul#sampleTabs li.active")
  15.  
  16. var activeTab = null;
  17. $('a[data-toggle="tab"]').on('shown', function (e) {
  18. activeTab = e.target;
  19. })
  20.  
  21. // tab
  22. $('#rowTab a:first').tab('show');
  23.  
  24. $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  25. //show selected tab / active
  26. console.log ( $(e.target).attr('id') );
  27. });
  28.  
  29. <ul class='nav nav-tabs'>
  30. <li class='active'><a href='#home'>Home</a></li>
  31. <li><a href='#menu1'>Menu 1</a></li>
  32. <li><a href='#menu2'>Menu 2</a></li>
  33. <li><a href='#menu3'>Menu 3</a></li>
  34. </ul>
  35.  
  36. <div class='tab-content'>
  37. <div id='home' class='tab-pane fade in active'>
  38. <h3>HOME</h3>
  39. <div id='menu1' class='tab-pane fade'>
  40. <h3>Menu 1</h3>
  41. </div>
  42. <div id='menu2' class='tab-pane fade'>
  43. <h3>Menu 2</h3>
  44. </div>
  45. <div id='menu3' class='tab-pane fade'>
  46. <h3>Menu 3</h3>
  47. </div>
  48. </div>
  49. </div>
  50.  
  51. <script>
  52. $(document).ready(function(){
  53. // Handling data-toggle manually
  54. $('.nav-tabs a').click(function(){
  55. $(this).tab('show');
  56. });
  57. // The on tab shown event
  58. $('.nav-tabs a').on('shown.bs.tab', function (e) {
  59. alert('Hello from the other siiiiiide!');
  60. var current_tab = e.target;
  61. var previous_tab = e.relatedTarget;
  62. });
  63. });
  64. </script>
Add Comment
Please, Sign In to add comment