如何使得一列内容点击一个按钮显示与隐藏

最新推荐文章于 2022-06-18 17:36:47 发布

a741102896

最新推荐文章于 2022-06-18 17:36:47 发布

阅读量911

点赞数

CC 4.0 BY-SA版权

文章标签： jquery css

本文链接：https://blog.youkuaiyun.com/a741102896/article/details/80969683

本文介绍了一个使用Java实现的简单通讯录页面展示案例。该页面包括按钮点击切换显示功能及表格展示联系人类型等信息。通过JavaScript实现了按钮的样式变化及DOM元素的显示隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta charset="utf-8">
<title>通讯录</title>
<input type="button" id="butn" />
<table class="table display" id="datatable">

</table>
<script>

   con+="<th><div id='a'>类型</div></th>";
con+="<td style='height:70px;'><div class='a' style='width:100px;'>"+json.result[i].type+"</div>
$(function(){
$("#butn").click(function name() {
$(this).toggleClass("class22");
tar=document.getElementById("a");
if(tar.style.display=="block"){
$(".a").css("display","none")
$("#a").css("display","none");
} else {
$(".a").css("display","block")
$("#a").css("display","block");
}
});
});
</script>
<style type="text/css">
.a{
display:none;
}
#a{
display:none;
}
.class22{
background:url("assets/img/uuu.png");
width:25px;
height:20px;
}
#butn{
width:25px;
height:20px;
}
</style>
</body>
</html>