簡單的JavaScript問題鏈接按鈕狀態圖像交換？

我知道這是一個真正的新手問題，但是這是我的！我一直在玩ajax，當我按下兩個按鈕時，我會交換這兩個圖像。簡單的JavaScript問題鏈接按鈕狀態圖像交換？

問題：如何使按鈕具有同時它的corrisponding圖像顯示顯示激活狀態？

我敢肯定，我需要做的是這樣設定的圖像上的ID，但除此之外，我不知道......

我的代碼（我不顯示AJAX的東西，因爲我懷疑你也需要這個）：

<div class="wrapper"> 
<div class="transcriptionbuttons"> 
    <ul class="transcript"> 
     <li class="transcript"><a class="transcriptionhorbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback)"></a></li> 
     <li class="transcript"><a class="transcriptionvertbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback)""></a></li> 
    </ul> 
</div> 
<div class="transcriptimage" id="targetDiv"> 
    <img src="this gets populated with ajax..." alt=""> 
</div> 
</div>

謝謝！ Joel

編輯：對不起，不清楚。列表項是按鈕。點擊一個列表項，並在targetDiv中加載一個圖像。我想要「活動」的按鈕保持活動狀態。

來源

2010-01-30 Joel

不知道你在問什麼想法？你想在回調加載時顯示一些內容嗎？你想改變什麼「按鈕」？ – Dexter 2010-01-30 05:00:10

如果我理解這個問題....你可以，例如，

<img id="targetImg" src="this gets populated with ajax..." alt="">

，並在你的JavaScript回調

document.getElementById("targetImg").setAttribute("src", "new_image_source.jpg");

編輯
相反，如果你的意思是你想改變<a>標籤點擊時，你能...

<li class="transcript"> 
    <a class="transcriptionhorbutton" 
     href="javascript:void()" 
     onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a> 
</li>

，並通過this成一個函數，它會使你想改變（當然這部分是有點不清楚）

EDIT 2

<li class="transcript"> 
    <a id="transcriptionhorbutton" class="inactive" 
     href="javascript:void()" 
     onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a> 
</li> 
<li class="transcript"> 
    <a id="transcriptionvertbutton" class="inactive" 
     href="javascript:void()" 
     onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"></a> 
</li> 

<script> 

var buttons = [ document.getElementById("transcriptionvertbutton"), 
       document.getElementById("transcriptionhorbutton")]; 

function make_active(el) { 
    deactivate_buttons(); 
    el.setAttribute("class","active"); 
} 

function deactivate_buttons() { 
    buttons[0].setAttribute("class","inactive"); 
    buttons[1].setAttribute("class","inactive"); 
} 
</script>

這不是最漂亮的解決方案，但它應該給你的我如何可以解決問題

來源

2010-01-30 05:01:38

抱歉我缺乏清晰度。是的 - 我希望在它所調用的圖像正在顯示時更改爲活動狀態。這就像典型的導航欄的事情，但在過去，我一直這樣做，有把一個ID在身上，等等，這樣就不會在這裏工作。 – Joel 2010-01-30 05:14:29

PS：我已激活狀態已經設立的CSS ...有沒有辦法來調用與「本」的功能？ – Joel 2010-01-30 05:16:09

好吧，上面要說明的一點是，transcriptionhorbutton是一個_id_。它唯一的標識，所以使它成爲一個班級有點奇怪。一個類定義了一個元素類型（通過它的函數，角色或狀態） - 在這種情況下，我用「活動」和「非活動」來描述元素的狀態。 – 2010-01-30 05:18:02

簡單的JavaScript問題鏈接按鈕狀態圖像交換？

回答

相關問題