文章结尾有效果图
一、引入Jquery(自行下载引入)
下载地址：https://jquery.com/download/
二、新建xx.html页面
2.1 引入Jquery
<script src="static/jQuery-v3.7.1.js"></script>
2.2 创建布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九宫格布局1,4,6,9分屏切换</title>
</head>
<body>
<!-- 左侧监控源 -->
<div class="menuTitle"></div>
<!-- 分屏切换按钮 -->
<div class="switchToggle"></div>
<!-- 视频容器 -->
<div class="container"></div>
</body>
<script src="static/jQuery-v3.7.1.js"></script>
</html>
3 生成左侧监控源列表
<div class="menuTitle">
<ul class="treeList">
<details open id="details">
<summary style="line-height: 25px;">视频监控列表[10/12]</summary>
<li>路况监控</li>
<li>机房监控</li>
<li>园区监控</li>
<li>二楼卫生间监控</li>
</details>
</ul>
</div>
<style>
body {
background-color: aliceblue;
font-family: 'Courier New', Courier, monospace;
font-weight: 500;
}
.menuTitle {
width: 15%;
height: 80%;
float: left;
margin-top: 100px;
}
.treeLis {
list-style-type: none;
margin-left: -20px;
cursor: pointer;
}
.treeList li {
padding-left: 15px;
line-height: 25px;
cursor: pointer;
font-size: 15px;
color: #00a65a !important;
}
</style>
4 生1，4，6，9分屏切换按钮
<div class="switchToggle">
<button id="toggle1">单屏</button>
<button id="toggle4">四分屏</button>
<button id="toggle6">六分屏</button>
<button id="toggle9