每日总结-23.10.20 

复制代码
<!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" onload="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" onload="this.height=ifd.document.body.scrollHeight"
        width="100%" scrolling="no"frameborder="0">
        </iframe>
        
        <iframe src="homework.html" height="713px" id="a3"
        name="ifd" onload="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" onload="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>

 

posted @ 2023-10-20 21:22  lao_bing  阅读(15)  评论(0)    收藏  举报