Question

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

以下是代码的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");
        });
    }
}

感谢您提出任何建议或答案......

Answer 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;
    })
});

Answer 2

    <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);
        });
    });
});

这有什么问题？单击链接时加载页面

2 个答案: