html元素的格式
实现两个div并排
<div id="div1" style="display: inline-block">smx1</div>
<div id="div2" style="display: inline-block">smx2</div>点击按钮A，隐藏自己，并且在同一个地方显示按钮B
html代码
<body>
<div class='btnBox'>
<button id='editBtn' onclick='editItem(this)'>编辑</button>
<button id='deleteBtn' onclick='deleteItem()'>删除</button>
<button id='saveBtn' onclick='saveItem(this)'>保存</button>
<button id='cancelBtn' onclick='cancelItem(this)'>取消</button>
</div>
</body>
<style>
.btnBox {
width: 100px;
position: relative;
}
/* 保存按钮和编辑按钮的位置一样 */
.btnBox .editBtn, .btnBox .saveBtn {
position: absolute;
left: 10px;
top: 0px;
height: 18px;
}
/* 删除按钮和取消按钮的位置一样 */
.btnBox .cancelBtn, .btnBox .deleteBtn {
position: absolute;
left: 50px;
top: 0px;
height: 18px;
}
</style>
js代码
<script>
$(function() {
$("#saveBtn,#cancelBtn").hide();//默认不显示保存和取消按钮
})
function editItem(obj) {
$(obj).hide();
$(obj).next().hide();
$(obj).next().next().show();
$(obj).next().next().next().show();
}
function saveItem(obj) {
$(obj).hide(); //按钮的显示和隐藏
$(obj).next().hide();
$(obj).prev().show();
$(obj).prev().prev().show();
}
function cancelItem(obj) {//取消编辑
$(obj).hide();
$(obj).prev().hide();
$(obj).prev().prev().show();
$(obj).prev().prev().prev().show();
}
</script>