Question

过去几天我一直在寻找解决方案，因为我找不到一个，我以为我会继续前进，看看这里有人可以提供帮助。我正在尝试从外部html页面（相同的域 - 只是单独的页面，即about.html，contact.html等）中的内容显示在div中的主index.html页面上单击各种导航链接时的#topContent（即。关于，联系等）。我希望通过将网站的“主要内容”存储在外部页面上，我可以避免在导航选择之间刷新。

到目前为止，我可以进行默认页面加载（外部 - main.html doc），但出于某种原因，当我点击导航链接时，我被重定向到另一个页面，这会产生错误，因为“ .html“被剥离了路径（期待看到：site.com/about.html - 实际显示：site.com/about）

我目前的更改是在这里：http://staging-site.site44.com/我会创建一个jsFiddle文件，但这个设置涉及加载多个html文件，因此我认为我不能用jsFiddle这样做。

非常感谢任何帮助！

谢谢！

HTML

    <nav id="headerNav">

            <ul class="navList">
                <li class="navItem"><a href="products" id="home" class="nav">Products</a></li>
                <li class="navItem"><a href="about" id="about" class="nav">About</a></li>
                <li class="navItem"><a href="portfolio" id="portfolio" class="nav">Portfolio</a></li>
                <li class="navItem"><a href="contact" id="contact" class="nav">Contact</a></li>
            </ul> 

        </nav>


    </div>

</div>

<!-- topMain -->
<div id="topContentWrapper">

     <div id="topContent">





    </div>



</div>

JS

$(document).ready(function() {
// Load default page content of main.html
$("#topContent").load("main.html");

$("#home").click(function() {
//load home.html on click
    $("topContent").load("home.html");
});

$("#products").click(function() {
//load home.html on click
    $("topContent").load("products.html");
});

$("#about").click(function() {
//load home.html on click
    $("topContent").load('about.html #topContent');
});

$("#portfolio").click(function() {
//load home.html on click
    $("topContent").load("portfolio.html");
});
 });

Answer 1

您的Javascript错误：

$(document).ready(function() {
// Load default page content of main.html
$("#topContent").load("main.html");

$("#home").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#topContent").load("home.html");
});

$("#products").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#topContent").load("products.html");
});

$("#about").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#topContent").load('about.html');
});

$("#portfolio").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#topContent").load("portfolio.html");
});
 });

你错过了jQuery中的“＃”选择器。因此，您的点击无法将任何内容加载到topContent元素中。此外，您还需要添加e.preventDefault（）以防止链接在单击时尝试跟踪href。

Answer 2

你的问题来自href未正确设置，缺少'.html'和$（'topContent'）选择器，缺少'＃'。顺便说一句，你必须在点击时防止'A'标签上的默认行为。

请参阅以下代码，使用重构：{better practice}

$(document).ready(function() {
   // Load default page content of main.html
   $("#topContent").load("main.html");

   $(".nav").click(function(e) {
       e.preventDefault();
       $("#topContent").load($(this).attr('href')+".html");
   });

 });

Answer 3

这就是我要做的，首先在锚中包含.html。

<ul class="navList" id="main-menu">
    <li><a href="products.html">Products</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

然后为所有这些使用一个jQuery函数：

$('#main-menu a').click(function(event){
    event.preventDefault(); // stops the page redirect

    var htmlFile = $(this).attr('href');    // gets href value from the anchor
    $.get(htmlFile, function(data) {        // you could use get/ajax/load
        $('#topContent').html(data);
    });
});

这是我的头脑，所以可能会有轻微的错误。

附加说明：您不需要那么多课程。

Answer 4

以下脚本适用于Chrome控制台

$('#topContent').load('about.html', function() {

});

问题出在href="pagename"，放href="#"，然后使用以下功能

$("#about").click(function() {

$('#topContent').load('about.html', function() {

});
});

使用Jquery将外部页面加载到div中会剥离.html并抛出错误页面

4 个答案: