0

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

到目前为止，我能够加载默认页面（外部main.html文档），但由于某种原因，当我单击导航链接时，我被重定向到另一个页面，这会产生错误，因为“.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");
});
 });
4

4 回答 4

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。

于 2013-01-14T18:38:11.670 回答
0

您的问题来自未正确设置的 href，缺少 '.html' 和 $('topContent') 选择器，缺少 '#'。顺便说一句，您必须在单击时阻止“A”标签的默认行为。

请参阅以下代码，使用重构：{更好的做法}

$(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");
   });

 });
于 2013-01-14T18:35:35.977 回答
0

这就是我要做的，首先在锚点中包含 .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);
    });
});

这不是我的想法，所以可能会有轻微的错误。

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

于 2013-01-14T18:39:14.900 回答
0

下面的脚本在 chrome 控制台上工作

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

});

问题出在href="pagename"，放入href="#"然后使用下面的函数

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

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

});
});
于 2013-01-14T18:40:03.413 回答