Css - How to change the watermark according to the active tab?

Question

I have the following links:

<ul id='menu' class='menuAP'> <li id='navAppPop' class='active'> <a> <img src='assets/images/applicant.png' class='navImg' /> Applicant </a> </li> <li id='navProvPop' class='provRight'> <a> <img src='assets/images/Providers.png' class='navImg' /> Providers </a> </li> </ul> 

Then I:

 <div id='watermark'></div> 

which contains my watermark.

How can I change it dynamically when a specific tab is selected?

Answer 1

You can try something like this:

 $('#menu li').click(function() { $(this).siblings('li').removeClass('active'); $(this).addClass('active'); if ($('#navAppPop').hasClass('active')) { $("#watermark").css('background-image', 'url(assets/images/appWatermark.png)'); } }); 

Just add code for other tabs to the click function.

This is done in order to change which link is active, and sets the background according to which link has the active class.