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>

这段文字含有我的水印。

当特定的选项卡被选中时，我该如何动态更改它呢？

- user2256956

---

如果我理解正确的话，您想通过单击“菜单”无序列表中的链接来将水印更改为所选图像。是这样吗？ - Sid

正确。每个选项卡在单击li链接时都有不同的水印要放置在水印div中。 - user2256956

@Phillip-juan van der Berg 给出了我想到的回答。 - Sid

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

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

这样做的作用是更改活动链接并根据具有活动类的链接设置背景。

- Phillip-juan