如何相应更改活动菜单项中的图像

时间:2015-11-14 09:54:41

标签: javascript jquery html css webpage

这里我有一个菜单和菜单项,上面有不同的图标

例如,我有(HomeIcon)HomeText /(AppleIcon)AppleText /(OrangeIcon)OrangeText。

所有这些用户都将用户重定向到我页面中的相应部分。

一旦我进入Home Section,菜单项的背景将从白色变为黑色,因为我在JQuery中添加了Class“active”。

因此,活动项目的黑色图标始终隐藏...

如果我获得白色相同的图标,我该如何动态更改图片网址?

请帮忙!

更新

/*Javascript*/ 

/*Javascript to remove and add class ".active" to the tag <li> */
/*CSS*/

ul li.active a p
{
    color:white
}
<!--HTML-->

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

enter image description here

3 个答案:

答案 0 :(得分:2)

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

HTML

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

CSS

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

查看jsfiddle示例

答案 1 :(得分:1)

第一步,包括两个图像,“活动”图像与样式显示:无在页面加载时隐藏

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

和js: (在这里我假设你的代码至少针对li给它活跃的类)对于li里面的每个图像,切换它们的可见性

jQuery(focused_li).find('image').each(function(){
  jQuery(this).toggle();
});

答案 2 :(得分:1)

谢谢你们!

我认为你发布的所有人都可以解决我的问题, 但在阅读@Elentriel的答案后,我尝试了解问题。

为了简单起见,我想使用css。 将添加一个新的更多课程&#34; .activemenuicon&#34;对于那些白色图标。

&#13;
&#13;
ul li.active a img.menuicon
{
    display:none;
} 

ul li.active a img.activemenuicon
{
    display:inline;
}
&#13;
&#13;
&#13;