复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<link rel="stylesheet" href="css/page.css" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
<!-- <script type="text/javascript" src="js/main.js" ></script> -->
<style>
body{
background-color: rgb(200, 241, 248);
}
ul{
list-style-type:none;
}
li .item{
display: none;
}
.top .spacer{
width: 50%;
}
iframe{
position: relative;
margin: 10px;
}
</style>
</head>
<body>
<div class="left">
<div class="bigTitle">学习管理系统</div>
<div class="lines">
<div onclick="pageClick(this)" id="person" class="active"><img src="img/icon-1.png" />个人信息</div>
<div class="show" onclick="pageClick(this)"><img src="img/icon-2.png" />学生学业管理 ∨ </div>
<ul>
<li><div class="item" onclick="pageClick(this)" id="lesson"><img src="img/icon-4.png" />课程管理</div></li>
<li><div class="item" onclick="pageClick(this)" id="homework"><img src="img/icon-5.png" />作业实验管理</div></li>
</ul>
<div onclick="pageClick(this)" id="online"><img src="img/icon-3.png" />网课资源</div>
</div>
</div>
<div class="top">
<div class="leftTiyle" id="flTitle">业务人员管理</div>
<div class="spacer"></div>
<img src="img/ji.png" style="height: 70px;width: 70px; border-radius: 50%;padding: 19px;" alt="">
<div class="thisUser">当前用户：小坤坤</div>
</div>
<div class="content">
<iframe src="all_Student.html" height="713px" id="a1"
name="ifd" onl oad="this.height=ifd.document.body.scrollHeight"
width="100%" scrolling="no" frameborder="0" hspace="-150" vspace="-150"padding:10px ></iframe>
<iframe src="lesson.html" height="713px" id="a2"
name="ifd" onl oad="this.height=ifd.document.body.scrollHeight"
width="100%" scrolling="no"frameborder="0">
</iframe>
<iframe src="homework.html" height="713px" id="a3"
name="ifd" onl oad="this.height=ifd.document.body.scrollHeight"
width="100%" scrolling="no"frameborder="0">
</iframe>
<iframe src="Online_course_resources.html" height="713px" id="a4"
name="ifd" onl oad="this.height=ifd.document.body.scrollHeight"
width="100%" scrolling="no"frameborder="0">
</iframe>
</div>
<script>
let a1=document.querySelector('#a1');
let a2=document.querySelector('#a2');
let a3=document.querySelector('#a3');
let a4=document.querySelector('#a4');
a1.style.display='block';
a2.style.display='none';
a3.style.display='none';
a4.style.display='none';
let lesson=document.querySelector('#lesson');
let homework=document.querySelector('#homework');
let person=document.querySelector('#person');
let online=document.querySelector('#online')
person.onclick=function(){
a2.style.display='none';
a1.style.display='block';
a3.style.display='none';
a4.style.display='none';
}
homework.onclick=function(){
a1.style.display='none';
a2.style.display='block';
a3.style.display='none';
a4.style.display='none';
}
lesson.onclick=function(){
a1.style.display='none';
a2.style.display='none';
a3.style.display='block';
a4.style.display='none';
}
online.onclick=function(){
a1.style.display='none';
a2.style.display='none';
a4.style.display='block';
a3.style.display='none';
}
let show=document.querySelector('.show');
let items=document.querySelectorAll('.item');
show.onclick=function()
{
if(items[0].style.display=='none')
{
for(let item of items){
item.style.display='block';
}
}
else{
for(let item of items){
item.style.display='none';
}
}
}
</script>
</body>
</html>
标签：总结,style,20,none,23.4,let,querySelector,document,display From： https://www.cnblogs.com/laobing6214/p/17338420.html