什么'这个错了吗?单击链接时加载页面

What's wrong with this? Load Pages when links are clicked

本文关键字：链接 单击 加载 错了 什么      更新时间：2023-09-26

我正在为一个正在开发的网站使用Ajax，但这段代码有问题。。。当URL类似于mywebsite.com时？about我希望显示about页面。

这是代码的HTML部分（注意：当按下链接时，文本将插入DIV"内容"）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="script/open_page.js"></script>
<div id="wrapper">
    <div id="header">
        <ul class="nav">
            <li><a href="" onclick="load_home()">Home</a></li>
            <li><a href="" onclick="load_about()">About Us</a></li>
            <li><a href="" onclick="load_exchange()">Exchanges</a></li>
            <li><a href="" onclick="load_photos()">Photos</a></li>
            <li><a href="" onclick="load_contact()">Contact</a></li>
        </ul>
    </div>
    <div id="content">
    </div>
</div>

以下是JavaScript的一部分：

var currentpage;
function load_about() { // Loads About Us
    if ($current_page == "about") {
        $(document).ready(function(){
            $("#content").load("contents/about.html");
        });
    }
}

感谢您的任何建议或回答。。。

由于您在点击主页链接时调用load_about，我认为if条件没有必要。此外，在这种情况下，使用dom ready是错误的

应该是

    function load_about() { // Loads About Us
        $("#content").load("contents/about.html");
    }

如果由我决定，我可能会做稍微不同的

<div id="wrapper">
    <div id="header">
        <ul class="nav">
            <li><a href="contents/home.html" onclick="load_home()">Home</a></li>
            <li><a href="contents/about.html" onclick="load_about()">About Us</a></li>
            <li><a href="contents/a.html" onclick="load_exchange()">Exchanges</a></li>
            <li><a href="contents/b.html" onclick="load_photos()">Photos</a></li>
            <li><a href="contents/c.html" onclick="load_contact()">Contact</a></li>
        </ul>
    </div>
    <div id="content">
    </div>

和

$(document).ready(function(){
    $('#header ul.nav li').click(function(){
        $("#content").load($(this).find('a').attr('href'));
        return false;
    })
});

    <ul class="nav">
        <li><a href="" data-page="home">Home</a></li>
        <li><a href="" data-page="about">About Us</a></li>
        <li><a href="" data-page="exchange">Exchanges</a></li>
        <li><a href="" data-page="photos">Photos</a></li>
        <li><a href="" data-page="contact">Contact</a></li>
    </ul>
$(function() {
    $('.nav').on('click', 'a', function(e) {
        e.preventDefault();
        var pageToLoad = $(this).data('page');
        $.get('contents/' + pageToLoad + '.html'), null, function(response) {
            $("#content").html(response);
        });
    });
});
相关文章：