时间戳

首页 > 解决方案 > 为什么使用 jQuery nav-placeholder 替换导航栏不起作用？

javascript - 为什么使用 jQuery nav-placeholder 替换导航栏不起作用？

问题描述

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <!-- header CSS -->
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <!--Navigation bar-->
    <div id="nav-placeholder"></div>

    <!-- Footer -->
    <div id="footer-placeholder"></div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->

    <!-- nav bar shortcut script -->
    <script>
        $( "#nav-placeholder" ).load( "nav.html" );
    </script>

    <!-- footer shortcut script -->
    <script>
        $( "#footer-placeholder" ).load( "footer.html" );
    </script>

</body>
</html>

我尝试使用

<script>
    $( "#nav-placeholder" ).load( "nav.html" );
</script>

和

<script>
    $.get("nav.html", function(data){
        $("#nav-placeholder").replaceWith(data);
    });
<script>

他们没有工作。此外，我使用的 jquery 版本也存在一些问题。我用.min.js,.js和.slim.min.js. 他们也什么都不做。

我是 Web 开发的新手，我真的很困惑。我阅读了文档，我认为代码在这里没有做错任何事情。预先感谢您的任何帮助！

这是我的目录的样子：

12:50:29 anthony@linux my-website ±|main|→ tree -L 2
.
├── css
│   └── main.css
├── footer.html
├── images
│   ├── favicon.ico
│   ├── icon.afphoto
│   └── icon.png
├── index.html
├── LICENSE
├── nav.html
├── node_modules
│   └── jquery
├── package.json
├── package-lock.json
├── pages
│   ├── about.html
│   ├── blog.html
│   ├── contact.html
│   ├── data_science_projects.html
│   ├── page_footer.html
│   ├── page_nav.html
│   ├── photography.html
│   ├── recommendations.html
│   ├── resume.html
│   └── what_i_do.html
└── README.md

标签： javascripthtmljquery

解决方案

试试这个，看看服务器是否告诉你什么。

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery('#nav-placeholder').load('nav.html', null, function(responseText, textStatus, xhr) {
              alert(textStatus); // 
            });
        });
    </script>

推荐阅读