如何更改活動菜單項內的圖像相應

例如不同的圖標菜單和菜單項，我有（HomeIcon）HomeText /（AppleIcon）AppleText /（OrangeIcon）OrangeText。

所有這些都將用戶重定向到我的頁面中的相應部分。

一旦我進入主頁部分，菜單項的背景將從白色變爲黑色因爲我在我的JQuery中添加了「活動」類。

結果，活動項目的黑色圖標總是隱藏...

如果我能在白色相同的圖標，我怎麼能動態改變圖像的URL？

請幫忙！

更新

/*Javascript*/ 
 

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

/*CSS*/ 
 

 
ul li.active a p 
 
{ 
 
    color:white 
 
}

<!--HTML--> 
 

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

來源

2015-11-14 Tony Wu

給定的代碼示例，請。我會想象沿着jQuery（「你的圖像選擇器」）。attr（「src」，「http：www.newimageurl.com/image.jpg」）。雖然 – Elentriel

第一步中，包括兩個圖像，「活性」圖像是與式顯示：無如在頁面加載到隱藏

<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：（這裏我asume上你的代碼中已經至少有針對性的李給它的活動類）對於李內的每個圖像，切換自己的知名度

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

來源

2015-11-14 10:10:04 Elentriel

您可以使用僞元素而不是圖像。

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

來源

2015-11-14 10:26:28

這種方式，你可以把所有的圖標放在一個文件中 - 你只需要爲每個列表項指定類（或其他屬性）和背景位置 –

謝謝你們來看看吧！

我認爲所有您發佈的帖子都可以解決我的問題，但我在閱讀@Elentriel的答案後嘗試瞭解問題。

爲了簡單起見，我想用css。將爲這些白色圖標添加一個新的更多課程「.activemenuicon」。

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

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

來源

2015-11-14 11:36:27

如何更改活動菜單項內的圖像相應

回答

相關問題