Tomcat布局与交互实践-优快云博客

本文详细介绍如何使用Tomcat部署自定义布局，并通过JavaScript实现页面元素的动态交互效果，包括点击变色及区域隐藏显示功能。

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

目标:用Tomcat实现下图模块,同时实现点击左边黄颜色区域，隐藏掉本黄色区域，点一下顶部红色区域，黄色区域弹出。

进入tomcat文件夹->webapps->ROOT

创建记事本,改名为frame.jsp,记事本打开,输入代码

<html>
<head>
<style>
.background{
height: 120px;
width: 200px;
background-color: black;
margin: 0 auto;
}
.head{
height: 10px;
width: 200px;
background-color: red;
margin-top: 0px;
margin-left: 0px;
text-align: center;
font-size: 5px;
line-height: 10px;
color: white
}
.left{
height: 100px;
width: 60px;
background-color: yellow;
float: left;
text-align: center;
font-size: 5px;
line-height: 100px;
color: white
}
.right{
height: 100px;
width: 140px;
background-color: green;
float: left;
text-align: center;
font-size: 5px;
line-height: 100px;
color: white
}
.bottom{
height: 10px;
width: 200px;
background-color: red;
margin-top: 0px;
margin-left: 0px;
text-align: center;
font-size: 5px;
line-height: 10px;
color: white
}
</style>
<script>
    window.onload = function(){
        var divs = document.getElementsByTagName("div");
        var len = divs.length;
        divs[1].onclick = function(){
            divs[2].style.backgroundColor = "yellow";
         };
        divs[2].onclick = function(){
            this.style.backgroundColor = "white";
         };
    };
</script>
</head>
<body>
<div class='background'>
<div class='head'>网页的头部</div>
<div class='left'>网页的左部</div>
<div class='right'>网页的右部</div>
<div class='bottom'>网页的底部</div>
</div>
</body>
</html>

关于点击变色，我参考了这篇文章：https://www.cnblogs.com/shark1100913/p/5718844.html