Q:

Css - How can I change a watermark according to active tab?

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 have:
<div id='watermark'></div>

which contains my watermark. 
How can I change it dynamically, when a certain tab is selected?

A:

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 the code for the other tabs in the click function as well.
What this does is to change which link is active and sets the background according to which link has the active class.

