顯示div onclick並隱藏觸發它的圖像

我想使用下面的代碼來顯示一個隱藏的div onclick，但是當它被顯示時，我想讓我用來觸發它的圖像消失。以下是我迄今爲止：顯示div onclick並隱藏觸發它的圖像

HTML：

<img src="Icons/note_add.png" onclick="show('comment')"/>&nbsp;&nbsp;<div id="comment" style="float:left;display:none;"><textarea name="textfield6" cols="30" rows="2" id="textfield4" class="text"></textarea>&nbsp;<a href="#" class="buttonintable">Submit</a></div>

JS：

function show(target){ 
document.getElementById(target).style.display = 'block'; 
} 
function hide(target){ 
document.getElementById(target).style.display = 'none'; 
}

如何調整這隱藏了一槍元素？

來源

2013-03-05 boy

Jimmy的答案會起作用，但是爲了讓它顯示出來（我假設你想這樣），你應該爲圖片標籤添加一個id ...以下內容應該可以工作。

<img id="clickMeId" src="Icons/note_add.png" onclick="show('comment')"/>&nbsp;&nbsp;<div id="comment" style="float:left;display:none;"><textarea name="textfield6" cols="30" rows="2" id="textfield4" class="text"></textarea>&nbsp;<a href="#" class="buttonintable">Submit</a></div> 

function show(target){ 
document.getElementById(target).style.display = 'block'; 
document.getElementById("clickMeId").style.display = 'none'; 
} 
function hide(target){ 
document.getElementById(target).style.display = 'none'; 
document.getElementById("clickMeId").style.display = 'block'; 
}

來源

2013-03-05 17:08:28 Chris

[編輯]

更改功能這樣：

function show(this, target){ 
    document.getElementById(target).style.display = 'block'; 
    this.style.display = 'none'; 
}

而onclick屬性這樣：

<img onclick="show(this, 'comment')" />

來源

2013-03-05 17:04:43

使用'onclick'在線，你就必須通過'this'。當使用它作爲'element.onclick = function;'時，你不用，也不用'addEventListener'。 – Ian 2013-03-05 17:09:41

@Ian這麼想。謝謝澄清！ – 2013-03-05 17:14:09

-2

使用jquery這很容易。 $（「＃yourdivid」）。hide（）;

來源

2013-03-05 17:04:53

上「點擊」發送的第二參數（本），這將是圖像元素本身

則該函數將適用「顯示無」到它：

function show(target, trigger){ 
    document.getElementById(target).style.display = 'block'; 
    trigger.style.display = "none" 
}

但是，這一切都是突兀的Javascript代碼，我會建議你使用不顯眼的JS代碼。

來源

2013-03-05 17:10:15 ecairol

我寧願簡化的背景下突出哪些事項，由Chris's answer啓發：

<img id="clickMeId" onclick="show('comment'); hide('clickMeId')" alt="click me"> 
 

 
<div id="comment" style="display:none;"> yada yada </div> 
 

 
<script> 
 
    function show (toBlock){ 
 
    setDisplay(toBlock, 'block'); 
 
    } 
 
    function hide (toNone) { 
 
    setDisplay(toNone, 'none'); 
 
    } 
 
    function setDisplay (target, str) { 
 
    document.getElementById(target).style.display = str; 
 
    } 
 
</script>

來源

2014-11-13 12:58:42 cregox

如何在onClick上添加fadeIn效果？ – 2015-12-11 00:45:08

顯示div onclick並隱藏觸發它的圖像

回答

相關問題