How to use tabs event

Tabs Events https://framework7.io/docs/tabs.html#tabs-events
I can not understand.

i want to do something like this:

<div class="tabs">
    <div id="tab1" class="tab tab-active">
      ... Tab 1 content ...
    </div>
    <div id="tab2" class="tab">
      ... Tab 2 content ...
    </div>
    <div id="tab3" class="tab">
      ... Tab 3 content ...
    </div>
</div>

when tab active,request data and Infinite Scroll

You could do something like

$("#tab1" ).on('tab:show', function( event, ui ) {
   // do whatever you want here, like alert a message!
   alert("Tab loaded!"); });
1 Like

thank you!
but, if i have a lot of tab-link,like this:

QQ%E6%88%AA%E5%9B%BE20190225180442

and these tab-link were from database,how can coding the js code?

You could use the id value for each tab (tab0, tab1, etc) which I imagine you store in the database.

Or if you want the same to happen to all tabs, you could call the function on a class, say “db-tabs”, (or “tab-category”) that all the tabs share, like

<div class="tabs">
    <div id="tab1" class="tab tab-active db-tabs">
         ... Tab 1 content ...
    </div>
    <div id="tab2" class="tab db-tabs">
       .... Tab 2 content ...
   </div>
  
 // etc

then call the function on the class like

$(".db-tabs" ).on('tab:show',...

thank you very much!

code in index.html

how to do?thank you!

$(".db-tabs" ).on('tab:show', function() {
  var $tabEl = $(this);
  var tabId = $tabEl.attr('id');
  // further logic based on tab ID that became visible
  ...
})
1 Like

thank you!
but, when the page init, the default active tab how to get data?
because this time ‘tab:show’ not work.

// event inializate page when loaded
document.addEventListener("DOMContentLoaded", function(event) { 
  alert("Page init!"); 
  var tabId = $(".tab-active" ).attr('id'); // get Id from div with class tab-active // may be work )))
});