这里我有一个菜单和菜单项,上面有不同的图标
例如,我有(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>
答案 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;对于那些白色图标。
ul li.active a img.menuicon
{
display:none;
}
ul li.active a img.activemenuicon
{
display:inline;
}
&#13;