Javascript 如何相应地更改活动菜单项内的图像

这里我有一个菜单，菜单上有不同的图标

例如，我有（HomeIcon）HomeText/（AppleIcon）AppleText/（OrangeIcon）OrangeText

它们都将用户重定向到我的页面中的相应部分

一旦我转到主页部分，菜单项的背景将从白色变为黑色，因为我在JQuery中添加了类“active”

因此，活动项的黑色图标始终隐藏

如果我得到相同的白色图标，如何动态更改图像url

请帮忙

更新

/*Javascript*/
/*Javascript删除并将class.active添加到标记
*/

/*CSS*/
ul li.active a p
{
颜色：白色
}

第一步，包括两个图像，“活动”图像具有样式显示：无，以便在页面加载时隐藏

 <ul id="menu">
        <li>
            <a href="#firstPage">
                <image src="imgs/menu/home.png" class="menuicon" />
                <image src="imgs/menu/home-active.png" class="menuicon" style="display:none"/>
                <p class="menutext">Home<p>
            </a>
        </li>
        <li>
            <a href="#secondPage">
                <image src="imgs/menu/apple.png" class="menuicon" />
                <image src="imgs/menu/apple-active.png" class="menuicon" style="display:none"/>
                <p class="menutext">Apple<p>
            </a>
        </li>
        <li>
            <a href="#3rdPage">
                <image src="imgs/menu/orange.png" class="menuicon" />
                <image src="imgs/menu/orrange-active.png" class="menuicon" style="display:none"/>
                <p class="menutext">Orange<p>
            </a>
        </li>
      </ul>

---

第一步，包括两个图像，“活动”图像具有样式显示：无，以便在页面加载时隐藏

 <ul id="menu">
        <li>
            <a href="#firstPage">
                <image src="imgs/menu/home.png" class="menuicon" />
                <image src="imgs/menu/home-active.png" class="menuicon" style="display:none"/>
                <p class="menutext">Home<p>
            </a>
        </li>
        <li>
            <a href="#secondPage">
                <image src="imgs/menu/apple.png" class="menuicon" />
                <image src="imgs/menu/apple-active.png" class="menuicon" style="display:none"/>
                <p class="menutext">Apple<p>
            </a>
        </li>
        <li>
            <a href="#3rdPage">
                <image src="imgs/menu/orange.png" class="menuicon" />
                <image src="imgs/menu/orrange-active.png" class="menuicon" style="display:none"/>
                <p class="menutext">Orange<p>
            </a>
        </li>
      </ul>

---

可以使用伪元素而不是图像

HTML

---

看看示例

您可以使用伪元素而不是图像

HTML

看一看例子

谢谢大家

我想你发的那些帖子都能解决我的问题， 但在阅读了@Elentriel的答案后，我尝试了这个问题

为了简单起见，我想使用css。 将为这些白色图标添加一个新的more类“.activemenuicon”

ul li.active a img.menuicon
{
显示：无；
} 
ul li.active a img.activemenuicon
{
显示：内联；
}

谢谢大家

我想你发的那些帖子都能解决我的问题， 但在阅读了@Elentriel的答案后，我尝试了这个问题

为了简单起见，我想使用css。 将为这些白色图标添加一个新的more类“.activemenuicon”

ul li.active a img.menuicon
{
显示：无；
} 
ul li.active a img.activemenuicon
{
显示：内联；
}

请给出代码示例。我会想象一些类似jQuery（“您的图像选择器”）.attr（“src”、“http:www.newimageurl.com/image.jpg”）；请给出代码示例。我会想象一些类似jQuery（“您的图像选择器”）.attr（“src”、“http:www.newimageurl.com/image.jpg”）；通过这种方式，您可以将所有图标放在一个文件中-您只需为每个列表项指定类别（或其他属性）和背景位置-通过这种方式，您可以将所有图标放在一个文件中-您只需为每个列表项指定类别（或其他属性）和背景位置Elentriel-您写道：“和js:（在这里，我假设您的代码中至少有针对性地将li设置为活动类）对于该li中的每个图像，切换它们的可见性jQuery（focused_li）.find（'image'）.each（function（）{），因此只给了hal；f一个解决方案…Elentriel-您写道：“和js:（这里我估计在代码中，您至少有针对性地将li设置为活动类）对于该li中的每个图像，切换它们的可见性jQuery（focused_li）.find（'image'）。each（function（）{），因此只为hal；f提供了一个解决方案。。。

<ul>
  <li class="active">
    <a href="./">
      <span>Home</span>
    </a>
  </li>
</ul>

li:before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  margin-top: -16px;
  width: 32px; height: 32px; background: url() no-repeat;
}
li:before { background-position: 0 0; }
li.active:before { background-position: -32px 0; }