0

我正在将 Ajax 用于我正在开发的网站，并且此代码有问题...当 URL 类似于 mywebsite.com?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");
        });
    }
}

感谢您的任何建议或答案...

4

2 回答 2

1

由于您正在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;
    })
});
于 2013-07-12T02:31:18.227 回答
0 
    <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);
        });
    });
});
于 2013-07-12T02:32:36.523 回答