我想建议您使用JQuery选项。

$("#item").toggle();
$("#item").hide();
$("#item").show();

例如:

$(document).ready(function(){
   $("#item").click(function(event){
     //Your actions here
   });
 });

function showStuff(id, text, btn) { document.getElementById(id).style.display = 'block'; // hide the lorem ipsum text document.getElementById(text).style.display = 'none'; // hide the link btn.style.display = 'none'; } <td class="post"> <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a> <span id="answer1" style="display: none;"> <textarea rows="10" cols="115"></textarea> </span> <span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span> </td>

你应该尽可能地将JS视为行为，而将CSS视为视觉糖果。通过稍微改变你的HTML:

<td class="post">
    <a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a>
    <span id="answer1" class="post-answer">
       <textarea rows="10" cols="115"></textarea>
    </span>
    <span class="post-text" id="text1">Lorem ipsum ... </span>
</td>

你可以简单地使用CSS规则从一个视图切换到另一个视图:

td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
    display : none;
}

以及在两个类之间切换的JS代码

<script type="text/javascript">
function showStuff(aPostTd) {
    aPostTd.className="post-editing";
}
</script>

我建议这样隐藏元素(就像其他人建议的那样):

document.getElementById(id).style.display = 'none';

但是为了让元素可见，我建议这样做(而不是display = 'block'):

document.getElementById(id).style.display = '';

原因是使用display = 'block'会导致在IE(11)和Chrome(版本43.0.2357.130 m)中都可见的元素旁边出现额外的空白/空白。

当你第一次在Chrome中加载一个页面时，一个没有样式属性的元素会像这样出现在DOM检查器中:

element.style {
}

使用标准JavaScript隐藏它使它像预期的那样:

element.style {
  display: none;
}

使用display = 'block'使其再次可见，将其更改为:

element.style {
  display: block;
}

这和原来不一样了。在大多数情况下，这可能不会有任何不同。但在某些情况下，它确实会引起异常。

使用display = "确实会将它恢复到DOM检查器中的原始状态，因此这似乎是更好的方法。

你可以使用element的hidden属性:

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false

我推荐Javascript，因为它相对较快，可塑性更强。

    <script>
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'block';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
</script>


<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>