顯示文字當圖像點擊/隱藏文字時不同的圖像點擊

我在看到的圖像上創建了以下效果here。當你懸停然後點擊每個圖像時，你會看到它們從灰色變成了顏色。當你點擊一個 - 其他人變灰色，被點擊的一個仍然是顏色。這很酷，但現在我需要文本1st：Sun來顯示和隱藏圖形按鈕。單詞「Sun」是需要鏈接到URL的鏈接，因此它必須與圖像效果代碼分開。顯示文字當圖像點擊/隱藏文字時不同的圖像點擊

我需要做什麼jQuery或JavaScript代碼？

p.s.如何正確發佈我現在的代碼。我試圖粘貼代碼「在此輸入代碼」，但收到的錯誤

來源

2010-06-05 chaser7016

你的URL是404。代碼：你在回覆textarea上面有一個橙色的問號，在右邊。你會看到代碼必須用4個空格縮進 – FelipeAls 2010-06-05 17:53:44

赦免URL已更新。我仍然有問題發佈代碼:( – chaser7016 2010-06-05 18:03:31

每行代碼必須在左邊有4個空格，並且您的代碼塊應該在之前和之後有一個空白行。忽略'101010'按鈕，它的代碼爲 – FelipeAls 2010-06-05 18:32:46

如果添加rel="img-id"到各個環節要隱藏或顯示如下這是相當簡單：

<div id="wrapper"> 

<div id="navigation"> 
    <a id="sun" href="#">sunimg</a> 
    <a id="plane" href="#">planeimg</a> 
    <a id="nano" href="#">nanoimg</a> 
</div> 
<div style="clear:both"></div> 

<div id="popuptext">1st: <a href="#" rel="sun">Sun</a> 
2nd: <a href="#" rel="plane">Airplane</a> 
3rd: <a href="#" rel="nano">Nano</a> 
</div> 

</div>

，然後更新您的就緒函數jQuery如下：

// target each link in the navigation div 
    $('#navigation a').click(function(e) { 
    // link that you clicked 
    clicked = $(this).attr('id'); 

    // this is faster than the .each() you used 
    $('#navigation a').removeClass('active'); 
    $(this).addClass('active'); 

    // hide all links, then show the one with the same rel as the id clicked 
    $('#popuptext a').hide(); 
    $('#popuptext a[rel='+clicked+']').show(); 

    // prevent the default link action 
    return false; 
    });

來源

2010-06-05 19:07:51 mVChr

嗨mVChr非常感謝你。我需要在href代碼之間添加嗎？再次感謝 – chaser7016 2010-06-05 19:46:35

我剛剛從您的測試頁面直接拉出了代碼，因此您用標籤包裹的內容取決於您。最重要的部分是讓#navigation中的id與#popuptext中的rels匹配 – mVChr 2010-06-05 20:20:05

Woot - mVChr再次感謝我越來越接近自昨天以來我一直在努力完成的事情:)現在，點擊時的文本選項全部出現在太陽。他們需要出現在他們自己的圖標下。任何建議？ – chaser7016 2010-06-05 20:41:28

顯示文字當圖像點擊/隱藏文字時不同的圖像點擊

回答

相關問題