HTML jQuery .load（）无效(HTML jQuery .load() not working)

我试图在bootstap html中使用jQuery .load（）函数，但我无法让它工作。

我想在标签内容（#accueil）中导入一些保存在另一个HTML（accueil.html）中的部分。

请在下面找到我想要包含的索引代码和accueil.html。

<!DOCTYPE html> <html> <head>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Paul's website</title> <meta name="description" content="Le site de Paul">  <link rel="stylesheet" type="text/css" href="css/style.css">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>    </head> <body> <div class="container-fluid">  <div class="row"> <header class="page-header hidden-xs col-sm-12"> <h1>Site de Paul</h1> </header> </div> <div class="row"> <section> <nav class="navbar navbar-default navbar-left" role="navigation">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand visible-xs" href="#">Site de Paul</a> </div>  <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#accueil" data-toggle="tab"> <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Accueil</a> </li> <li><a href="#programme" data-toggle="tab"> <span class="glyphicon glyphicon-glass" aria-hidden="true"></span> Programme</a> </li> <li><a href="#hotel" data-toggle="tab"> <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Lieu & Hotels</a> </li> <li><a href="#liste" data-toggle="tab"> <span class="glyphicon glyphicon-gift" aria-hidden="true"></span> Liste de Mariage</a> </li> <li><a href="#album" data-toggle="tab"> <span class="glyphicon glyphicon-camera" aria-hidden="true"></span> Album photo</a> </li> <li><a href="#covoiturage" data-toggle="tab"> <span class="glyphicon glyphicon-road" aria-hidden="true"></span> Covoiturage</a> </li> <li><a href="#contacts" data-toggle="tab"> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Contacts</a> </li> </ul> </div> </nav> <div class="tab-content col-sm-9" style="border:1px solid red;"> <div class="tab-pane active in" id="accueil">  </div> <div class="tab-pane" id="programme"><h2>Programme</h2></div> <div class="tab-pane" id="hotel"><h2>Hotel</h2></div> <div class="tab-pane" id="liste"><h2>Liste</h2></div> <div class="tab-pane" id="album"><h2>Album photo</h2></div> <div class="tab-pane" id="covoiturage"><h2>Covoiturage</h2></div> <div class="tab-pane" id="contacts"><h2>Contacts</h2></div> </div> </section> </div> <div class="row"> <footer class="well col-xs-12"> <p style="text-align:center;">- Paul's tests -</p> </footer> </div> </div>   <script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>  <script type="text/javascript"> $(function(){ $("#accueil").load("accueil.html"); }); </script> </body> </html>

在“#accueil”选项卡中添加Html

<section class="tab-section"> <h1>Bienvenue a tous</h1> <div id="welcomeTxt"> <figure class=""> <img id="imgAccueil" src="img/accueil.jpg" alt="Photo accueil" title="Welcome to our website"> <figcaption>Photo champs de tournesol</figcaption> </figure> <article class=""> <p> Nous sommes très heureux de vous acceuillir sur notre site! </p> </article> </div> </section>

I am trying to use the jQuery .load() function in a bootstap html but I can't get it to work.

I'd like to import some parts saved in another HTML (accueil.html) in a tab-content (#accueil).

Please find below my index code & the accueil.html that I'd like to include.

<!DOCTYPE html> <html> <head>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Paul's website</title> <meta name="description" content="Le site de Paul">  <link rel="stylesheet" type="text/css" href="css/style.css">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>    </head> <body> <div class="container-fluid">  <div class="row"> <header class="page-header hidden-xs col-sm-12"> <h1>Site de Paul</h1> </header> </div> <div class="row"> <section> <nav class="navbar navbar-default navbar-left" role="navigation">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand visible-xs" href="#">Site de Paul</a> </div>  <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#accueil" data-toggle="tab"> <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Accueil</a> </li> <li><a href="#programme" data-toggle="tab"> <span class="glyphicon glyphicon-glass" aria-hidden="true"></span> Programme</a> </li> <li><a href="#hotel" data-toggle="tab"> <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Lieu & Hotels</a> </li> <li><a href="#liste" data-toggle="tab"> <span class="glyphicon glyphicon-gift" aria-hidden="true"></span> Liste de Mariage</a> </li> <li><a href="#album" data-toggle="tab"> <span class="glyphicon glyphicon-camera" aria-hidden="true"></span> Album photo</a> </li> <li><a href="#covoiturage" data-toggle="tab"> <span class="glyphicon glyphicon-road" aria-hidden="true"></span> Covoiturage</a> </li> <li><a href="#contacts" data-toggle="tab"> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Contacts</a> </li> </ul> </div> </nav> <div class="tab-content col-sm-9" style="border:1px solid red;"> <div class="tab-pane active in" id="accueil">  </div> <div class="tab-pane" id="programme"><h2>Programme</h2></div> <div class="tab-pane" id="hotel"><h2>Hotel</h2></div> <div class="tab-pane" id="liste"><h2>Liste</h2></div> <div class="tab-pane" id="album"><h2>Album photo</h2></div> <div class="tab-pane" id="covoiturage"><h2>Covoiturage</h2></div> <div class="tab-pane" id="contacts"><h2>Contacts</h2></div> </div> </section> </div> <div class="row"> <footer class="well col-xs-12"> <p style="text-align:center;">- Paul's tests -</p> </footer> </div> </div>   <script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>  <script type="text/javascript"> $(function(){ $("#accueil").load("accueil.html"); }); </script> </body> </html>

Html to add in the "#accueil" tab

<section class="tab-section"> <h1>Bienvenue a tous</h1> <div id="welcomeTxt"> <figure class=""> <img id="imgAccueil" src="img/accueil.jpg" alt="Photo accueil" title="Welcome to our website"> <figcaption>Photo champs de tournesol</figcaption> </figure> <article class=""> <p> Nous sommes très heureux de vous acceuillir sur notre site! </p> </article> </div> </section>