Greasy Fork

Hello,

Having some issues detecting when a div has changed, for example this is the div when the page loads

<div class="container">
<p><div class="tabs"><div class="tab-list"><div class="tab-item active"><a tabindex="-1"><i class="submenu-icon fa fa-chart-bar"></i><div class="detail"><h5>Order Summary</h5><span></span></div></a><button class="close"><i class="far fa-times-circle" aria-hidden="true"></i></button></div></div><a class="arrow arrow-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></a><a class="arrow arrow-right disable-arrow"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></div></p>
<p></p>
</div>

and when I click a button to go to a different tab, the div changes too

<div class="container">
<p><div class="tabs"><div class="tab-list"><div class="tab-item"><a tabindex="-1"><i class="submenu-icon fa fa-chart-bar"></i><div class="detail"><h5>Order Summary</h5><span></span></div></a><button class="close"><i class="far fa-times-circle" aria-hidden="true"></i></button></div><div class="tab-item active"><a tabindex="-1"><i class="submenu-icon fa fa-university"></i><div class="detail"><h5>Manage Warehouse</h5><span></span></div></a><button class="close"><i class="far fa-times-circle" aria-hidden="true"></i></button></div></div><a class="arrow arrow-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></a><a class="arrow arrow-right disable-arrow"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></div></p>
</div>

So what I want to do is when class="tab-item active" which shows the current active tab then do a function depending on what the tab name is

The onchange attribute is only applicable to form field elements (input, select, textarea, etc)

Try to add an onclick event listener or mutation observer on the class tab-list, then maybe you can do something that way.