Skip to Main Content

React on TabPage Change

One

1

Two

2

Output

Hier

Steps

  • Give each of your tabpage a static ID. For example: ONE and TWO
  • create a function that gets called when mutation was observerd
function reactOnTabPageChanged(mutationsList, observer) {
  mutationsList.forEach(mutation => {
    if (mutation.attributeName === 'class') {        
        if (mutation.target.className.includes('a-Tabs-element-selected')) {          

          if (mutation.target.id === "SR_ONE") {
            apex.jQuery('#OUTPUT .t-Region-body').html('TabPage <h2>ONE</h2> is activated');
          } else if (mutation.target.id === "SR_TWO") {
            apex.jQuery('#OUTPUT .t-Region-body').html('TabPage <h2>TWO</h2> is activated');
          }

        };
    }
  });
}
  • when page is loaded create an Observer, which reacts when the attributes of tabpages changes
var mutationObserver = new MutationObserver(reactOnTabPageChanged);

mutationObserver.observe(document.getElementById('SR_ONE'), { attributes: true });
mutationObserver.observe(document.getElementById('SR_TWO'), { attributes: true });