Javascript change div content upon a click

Question

I\'m pulling a content from PHP array and I have a situation like this:

 

 04/25/2011 10         


        
                      

              相关标签:
       
      

Answer 1

How about something like:

onClick event calls a function (EDITED to be a little smarter than my original brute force method):

function swapdivs ( id_of_topdiv, id_of_bottomdiv ) {
  var topdiv    = getRefToDiv( id_of_topdiv );
  var bottomdiv = getRefToDiv( id_of_bottomdiv );

  var temp  = topdiv.style.zIndex;
  topdiv    = bottomdiv.style.zIndex;
  bottomdiv = temp.style.zIndex;
}

Could that or similar work for you? Or am I missing some subtle yet crucial requirement?

Answer 2

<style type="text/css">
    /* Normal mode */
    .weight-display div.edit {display:none}
    /* Editor mode */
    .weight-edit div.show {display:none}
</style>
<div class="weight-display">
    <button onclick="toggle(this)">Edit this!</button>
    <div class="edit"><input type="text" value="Test" /></div>
    <div class="show">Test</div>
</div>
<script type="text/javascript">
    function toggle(button)
    {
        // Change the button caption
        button.innerHTML = button.innerHTML=='Edit this!' ? 'Cancel' : 'Edit this!';
        // Change the parent div's CSS class
        var div = button.parentNode;
        div.className = div.className=='weight-display' ? 'weight-edit' : 'weight-display';
    }
</script>

Answer 3

What you suggest is basically correct. I would generate two div's one for display and one edit. The edit div will initially have display: none. When the Edit is clicked, hide the display div and show the edit div.