Hafwen 2023-04-11 19:29 采纳率: 100%
浏览 13
已结题

关于#jQuery#的问题,如何解决?

想利用jQuery做一个导航栏(在main.html内),点击其中一个可以在右边显示出网页来(本地写的html,exit.html),按照网上敲的代码不知道为什么就是显示不出来,orz兄弟姐妹们帮我看一看QAQ 感激不尽!

main.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>主页面</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#exit").click(function(){
            $("#content").load("templates\exit.html");
    });
    });
</script>
<style>
body
{
    background-color: #111111;
    padding: 15px;
}
ul
{
    list-style-type:none;
    margin:0;
    height:550px;
    background-color: red;
    float: left;
}
.nav-content
{
    display:block;
    font-weight:bold;
    font-size: 130%;
    font-family: 幼圆, YouYuan;
    color:#e8e8e8;
    background-color:#292929;
    width:200px;
    height: 108px;
    text-align:center;
    line-height: 98px;
    
    text-decoration:none;
    text-transform:uppercase;
    border-style:none none double none;
    border-width: 2px;
    border-color: #343434;
    transition-duration: 0.4s;
}
.nav-content:hover
{
    font-weight:bold;
    color:#08bf62;
    background-color:#343434;
    
}
#content{
    float:right;
    background-color:yellow;
    color:white;
    width:78%;
    height: 550px;
}
</style>
</head>

<body>
<ul class="nav">
    <li class="nav-content" id="main_page">
        主   页
    </li>
    <li class="nav-content" id="detection">
        新  闻  检  测
    </li>
    <li class="nav-content" id="history">
        历  史  数  据
    </li>
    <li class="nav-content" id="specification">
        使  用  说  明
    </li>
    <li class="nav-content" id="exit">
        退   出
    </li>
</ul>
<div id="content"></div>
</body>

</html>

exit.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>退出</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html {
            height: 100%;
        }
        body {
            background-color:#121212;
        }
        .login-container {
            width: 450px;
            height: 315px;
            margin: 0 auto;
            margin-top: 10%;
            border-radius: 15px;
            box-shadow: 0 10px 50px 0px rbg(59, 45, 159);
            background-color: #1e1e1e;
            font-family: 幼圆, YouYuan;
        }
        .right-container {
            width: 145px;
            display: inline-block;
            height: calc(100% - 120px);
            vertical-align: top;
            padding: 50px 0;
        }
        .regist-container {
            width:450px;
            margin: auto;
            text-align: center;
            color: #e8e8e8;
            font-size: 180%;
            font-weight: 200;
        }
        .regist-container span {
            border-bottom: 10px double #343434;
        }
        .message{
            width:450px;
            margin: auto;
            text-align: center;
            color:#e8e8e8;
            font-size: 120%;
            padding: 70px 0;
        }
        .action-position {
            width:420px;
            margin: auto;
        }
        .action-container {
            width:180px;
            margin: auto;
            font-size: 120%;
            color: #e8e8e8;
            text-align: center;
            position:relative;
            top: 50px;
        }
        .action-container span {
            border: 1px solid #343434;
            padding: 10px;
            display: inline;
            line-height: 20px;
            border-radius: 20px;
            width: 50%;
            position: absolute;
            bottom: 10px;
            left: calc(72px - 20px);
            transition: .2s;
            cursor: pointer;
        }
        .action-container span:hover {
            background-color: #343434;
            color: #08bf62;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="right-container">
            <div class="regist-container">
                <span class="regist">退   出</span>
            </div>
            <div class="message">
                感谢您的使用!请问您确定要退出吗?
            </div>
            <div class="action-position">
                <div class="action-container">
                    <span>退   出</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

文件结构:

img

  • 写回答

2条回答 默认 最新

  • Hafwen 2023-04-12 00:39
    关注

    通过使用浏览器内的开发者工具找到了错误,问题的解决办法参考下述链接~
    希望大家可以互相讨论学习,一起进步!
    https://blog.csdn.net/weixin_45749480/article/details/119936038?spm=1001.2014.3001.5506

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月20日
  • 已采纳回答 4月12日
  • 创建了问题 4月11日

悬赏问题

  • ¥15 用C语言完成一个复杂的游戏
  • ¥15 如何批量更改很多个文件夹里的文件名中包含文件夹名?
  • ¥50 MTK手机模拟HID鼠标出现卡顿
  • ¥20 求下下面这个数据结构代码
  • ¥20 前端 二进制文件流图片转化异常
  • ¥15 github上的这个C语言项目如何跑起来
  • ¥15 java 判断某个数 区间是否存在
  • ¥15 appium控制多个雷电模拟器问题
  • ¥15 C# iMobileDevice
  • ¥15 谁会做这个啊#ensp#Boson NetSim