Question

Is there a way in jquery to listen for a change to a node’s class and then take some action on it if the class changes to a specific class? Specifically, I’m using the jquery tools tabs plugin with the slideshow and as the slideshow is playing, I need to be able to detect when the focus is on a particular tab/anchor so that I can unhide a specific div.

In my specific example, I need to know when:

<li><a class="nav-video" id="nav-video-video7" href="#video7-video">Video Link 7</a></li>

changes to the following with the class “current” added:

<li><a class="nav-video" id="nav-video-video7 current" href="#video7-video">Video Link 7</a></li>

Then I want to unhide a div at that moment.

Thanks!

Answer 1

Here are some other finds that might provide a solution:

1. Most efficient method of detecting/monitoring DOM changes?
2. How can I detect when an HTML element’s class changes?
3. Monitoring DOM Changes in JQuery

And as it was suggested in #2, why not make current a class that is added, rather than a ID, and have the following CSS handle the show/hide action.

<style type='text/css>
    .current{display:inline;}
    .notCurrent{display:none;}
</style>

Might also be worth it to look into .on() in jquery.