<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>modifytext-sunshinegirl</title> <style> body,div,ul{ margin:0; padding:0; } div{ 500px; font-size:14px; margin-left:20px; } li{ list-style:none; height:30px; line-height:30px; } #headline{ margin-top:30px; padding-left:30px; border-top:1px solid #000; background:green; color:white; height:30px; line-height:30px; } input{ display:none; float:left; margin:5px auto 0; margin-left:5px; } #sort{ padding:5px 20px; } span{ float:left; } img{ float:left; margin:10px auto 0px; } </style> <script> window.onload=function(){ //获取元素 oEdit1=document.getElementById("edit1"); oEdit2=document.getElementById("edit2"); oLi1=document.getElementById("li1"); oLi2=document.getElementById("li2"); oInput1=oLi1.getElementsByTagName("input"); oInput2=oLi2.getElementsByTagName("input"); oSpan1=oLi1.getElementsByTagName("span")[0]; oSpan2=oLi2.getElementsByTagName("span")[0]; //自定义函数片断，循环进行不同元素的显示/隐藏操作 function fn(m,n){ for(var i=0;i<m.length;i++){ m[i].style.display=n; }; }; //自定义函数片断，进行不同元素的显示/隐藏操作 function sd(p,q){ p.style.display=q; }; //第一个“编辑”的点击事件 oEdit1.onclick=function(){ //先将编辑文本框内value值设为空，将span和img隐藏，文本框、保存、取消显示 oInput1[0].value=""; fn(oInput1,"block"); sd(oEdit1,"none"); sd(oSpan1,"none"); //点击取消时，恢复将span和img显示，文本框、保存、取消隐藏 oInput1[2].onclick=function(){ sd(oEdit1,"block"); sd(oSpan1,"block"); fn(oInput1,"none"); }; //点击保存时，在不为空时，将文本框内的值给span里，然后span和img显示，文本框、保存、取消隐藏 oInput1[1].onclick=function(){ if(oInput1[0].value==""){ alert("不能为空！"); }else{ oSpan1.innerHTML="<span>"+oInput1[0].value+"</span>"; fn(oInput1,"none"); sd(oEdit1,"block"); sd(oSpan1,"block"); } }; }; //第二个“编辑”的点击事件，与第一个相比除操作元素不同，其他相同 oEdit2.onclick=function(){ oInput2[0].value=""; fn(oInput2,"block"); sd(oEdit2,"none"); sd(oSpan2,"none"); oInput2[2].onclick=function(){ sd(oEdit2,"block"); sd(oSpan2,"block"); fn(oInput2,"none"); }; oInput2[1].onclick=function(){ if(oInput2[0].value==""){ alert("不能为空！"); }else{ oSpan2.innerHTML="<span>"+oInput2[0].value+"</span>"; fn(oInput2,"none"); sd(oEdit2,"block"); sd(oSpan2,"block"); } }; }; }; </script> </head> <body> <div> <div id="headline"> <span>分类名称</span> </div> <div id="sort"> <ul> <li id="li1"> <span>HTML日常总结</span> <img src="http://image.99114.com/upfile/pro/20090803/1536371786.jpg" style="14px;height:14px;" id="edit1" title="可编辑"/> <input type="textbox" class="textbox" id="textbox1" /> <input type="button" value="保存" id="save1"/> <input type="button" value="取消" id="undo1" /> </li> <li id="li2"> <span>JavaScript学习感悟</span> <img src="http://image.99114.com/upfile/pro/20090803/1536371786.jpg" style="14px;height:14px;" id="edit2" title="可编辑"/> <input type="textbox" class="textbox"/> <input type="button" value="保存"/> <input type="button" value="取消"/> </li> </ul> </div> </div> </body> </html>