显示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并隐藏触发它的图像

回答

相关问题