0

我正在尝试将不同的外部 HTMl 文件加载到我的父 HTML 中的 DIV 中。这是我正在使用的代码

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>BeautyDish Photography | Wedding and Beauty Photographer</title>
<meta name="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width">

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

</head>
<body>

<div id="wrapper" style=" max-width:1920px; min-width:1024px;">
  <nav>
    <div id='MainMenu'> 
        <a href="home">Home</a> 
        <a href="aboutus" id="aboutus">About Us</a> 
        <a href="portfolio" id="portfolio">Portfolio</a> 
        <a href="contactus" id="contactus">Contact Us</a> 
    </div>
  </nav>
  <div id="content" style="width:1200px; padding:0; margin:auto;">ff

  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="js/main.js"></script>
<script>
$(function(){
$("#MainMenu a").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#content").load($(this).attr('href')+".html", null, function(){
        alert('Load Done');
        });
});
});
</script>
</body>
</html>

每当我第一次单击任何链接时，它都可以正常工作，从第二次单击开始，加载时间会更长，并且警报不止一次出现。我还在http://www.jbasupphotography.com/index_new.html托管了一个工作版本 我是 jQuery 新手，请告诉我如何解决这个问题。

4

2 回答 2

3

问题似乎是您将整个页面加载到自身的 div 中。

它包含在其脚本和事件绑定中，这只会使情况变得更糟。

一个解决方案可能是减少到您真正感兴趣的部分（不同的页面）。但是这个解决方案必须针对您不清楚的实际需求而设计。

于 2013-06-07T18:36:01.020 回答
0

在加载之前，您可以先进行删除，因为它会加载多个文件。

$('#wrapper #content').remove();
$('#wrapper').append('<div id="#content"></div>')
于 2013-06-07T18:41:00.577 回答