想法： input 开始是设置没有边框；点编辑可以修改内容，取消、保存开始是隐藏的，开始编辑的时候，编辑隐藏， 取消、保存显示，点击取消、保存可以进行相应的操作。
我比较习惯上传可以直接复制粘贴运行的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
margin: 30px ;
}
input{
/* outline: none; */
border: none;
}
li a:nth-child(3),li a:nth-child(4){
display: none;
}
</style>
</head>
<body>
<ul>
<li>
<input type="text" value="JavaScript权威指南" >
<!-- 可以不加href属性，要是加的话就一定要写# 不然点击产生的效果会显示一瞬间 -->
<a href="#">编辑</a>
<a href="#">保存</a>
<a href="#">取消</a>
</li>
<li>
<input type="text" value="JavaScript权威指南" >
<!-- 可以不加href属性，要是加的话就一定要写# 不然点击产生的效果会显示一瞬间 -->
<a href="#">编辑</a>
<a href="#">保存</a>
<a href="#">取消</a>
</li>
<li>
<input type="text" value="JavaScript权威指南" >
<!-- 可以不加href属性，要是加的话就一定要写# 不然点击产生的效果会显示一瞬间 -->
<a href="#">编辑</a>
<a href="#">保存</a>
<a href="#">取消</a>
</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
getResult(lis[i]);
}
function getResult(father) {
//因为你是要将a input都循环三遍，在函数中又要直接用input第一个下标的值以及a的前三个所以是不能在外面写的
var a = father.getElementsByTagName('a');
var input = father.getElementsByTagName('input')[0];
//编辑
a[0].onclick = function () {
input.style.border = '1px solid black';
this.style.display = 'none';
a[1].style.display = 'inline';
a[2].style.display = 'inline';
}
//保存
a[1].onclick = function () {
input.innerText = input.innerText + '';
input.style.border = 'none';
a[0].style.display = 'inline';
this.style.display = 'none';
a[2].style.display = 'none';
}
// 取消
a[2].onclick = function () {
input.value = 'JavaScript权威指南';
input.style.border = 'none';
a[0].style.display = 'inline';
a[1].style.display = 'none';
this.style.display = 'none';
}
}
</script>
</body>
</html>
版权声明：本文为weixin_41684068原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。