jQuery写ajax(课程管理系统首页)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

页面布局：

       <div class="container">
    <div class="left">
        <h2>学生管理系统</h2>
        <ul>
            <li>
                <!-- 设置超链接target值  为  iframe标前的属性值，可以让页面在自身中跳转 -->
                <a href="./添加课程.html" target="iframe">添加课程</a>
            </li>
            <li>
                <a href="./删除课程.html" target="iframe">删除课程</a>
            </li>
            <li>
                <a href="./查询课程.html" target="iframe">查询课程</a>
            </li>
            <li>
                <a href="./修改课程.html" target="iframe">修改课程</a>
            </li>
            <li>
                <a href="./课程信息表.html" target="iframe">课程信息表</a>
            </li>
        </ul>
    </div>
    <div class="right">
        <!-- <div class="top"> -->
        <div class="top_box">
            <div class="top_cc">
                <span>欢迎使用学生管理系统，请登入</span>
                <button class="tc">退出系统</button>
            </div>
        </div>
        <div class="centent">
            <!-- 
                    内部嵌套标签
                    frameborder  默认为1，为1的时候显示滚动条     0 隐藏滚顶条
                 -->
            <iframe name="iframe" src="./课程信息表.html" frameborder="0" style="width:100%;height:100%;">
            </iframe>
        </div>
        <!-- </div>           -->
    </div>
</div>

页面样式：

   <style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        display: flex;
        width: 100vw;
        height: 100vw;
    }

    .left {
        width: 250px;
        background-color: rgb(243, 122, 122);
        color: white;
    }

    .left h2 {
        text-align: center;
        line-height: 40px;
    }

    .left li {
        text-align: center;
        line-height: 30px;
    }

    .left li a {
        color: white;
        text-decoration: none;
        font-size: 20px;
    }

    .right {
        flex: 1;
        /* 改变主轴方向为纵轴 */
        flex-direction: column;
        display: flex;
    }


    .right .top_box {
        height: 50px;
        color: white;
        line-height: 50px;
        background-color: rgb(243, 122, 122);
    }

    .top_cc {
        margin-left: 800px;
    }

    .right .top_box .tc {
        background-color: rgb(243, 122, 122);
        cursor: pointer;
        border: none;
        color: white;
    }

    .right .centent {
        flex: 1;
    }
</style>

引入jq库

   <script src="./jquery.js"></script>
<script>
    $(".tc").click(function () {
        // window.open("./登陆页面.html")
        location.href = "./登陆页面.html"
    })
</script>

点击左侧栏可以跳转相应的页面操作，点击退出系统则返回登录页