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

只需在 click 函数中添加其他选项卡的代码即可。

这样做是为了更改哪个链接是活动的，并根据哪个链接具有活动类来设置背景。