javascript - Css - 如何根据事件选项卡更改水印？

Question

我有以下链接:

<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>

然后我有:

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

其中包含我的水印。

选择某个选项卡时如何动态更改它？

Answer 1

你可以尝试这样的事情:

$('#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)');
    }
});

只需在点击功能中添加其他选项卡的代码即可。

这样做的目的是更改哪个链接处于事件状态，并根据哪个链接具有事件类来设置背景。