<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input,
li :nth-child(4),
li :nth-child(5) {
display: none;
}
</style>
</head>
<body>
<ul id="list">
<li><span>javascript权威指南</span>
<input type="text">
<a href="#">编辑</a>
<a href="#">保存</a>
<a href="#">取消</a> </li>
<li><span>javascript权威指南</span>
<input type="text">
<a href="#">编辑</a>
<a href="#">保存</a>
<a href="#">取消</a> </li>
<li><span>javascript权威指南</span>
<input type="text">
<a href="#">编辑</a>
<a href="#">保存</a>
<a href="#">取消</a> </li>
</ul>
<script src="./tools.js"></script>
<script>
var list = getById('list');
var lis = getByTag(list, 'li');
for (var i = 0; i < lis.length; i++) {
edit(lis[i]);
}
function edit(parent) {
var span = getByTag(parent, 'span')[0];
var input = getByTag(parent, 'input')[0];
var a1 = getByTag(parent, 'a')[0];
var a2 = getByTag(parent, 'a')[1];
var a3 = getByTag(parent, 'a')[2];
a1.onclick = function () {
input.value = span.innerHTML;
input.style.display = "inline-block";
span.style.display = "none";
a1.style.display = "none";
a2.style.display = "inline";
a3.style.display = "inline";
};
a2.onclick = function () {
span.innerHTML = input.value;
input.style.display = "none";
span.style.display = "inline";
a1.style.display = "inline";
a2.style.display = "none";
a3.style.display = "none";
}
a3.onclick = function () {
input.style.display = "none";
span.style.display = "inline";
a1.style.display = "inline";
a2.style.display = "none";
a3.style.display = "none";
}
}
</script>
</body>
</html>
实现效果如下
1649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
