Question

尝试从其他网页获取内容，以便在点击时从网址加载到特定的Div中。但由于某种原因它不起作用。链接保持转发到页面而不是在div中打开。最重要的是，初始加载代码工作。它加载初始内容。设置闹钟以通知我，当我点击具有所需内容的链接时，它会发送警报。然后我把返回假;在最后，现在它不会加载任何东西。我究竟做错了什么。我使用一年前在这里使用的代码。但现在它不在我的新网站上工作。请帮我确定如何解决这个问题。

这是我的AJAX代码：

$(document).ready(function () {
$('#main').load('pages/home.php');

    $('ul#navMenu li a').click(function() {
        var page = $(this).attr('href');
        $('main').load('pages/' + page + '.php');
        return false;
    }); 

});

这是我的HTML：

<body class="">
    <div class="container">
        <div class="menu-wrap">
            <nav class="menu">
                <div class="link-list">
                    <center>
                    <ul id="navMenu">
                    <li><a href="pages/home.php"><span>HOME</span></a></li>
                    <li><a href="pages/artist.php"><span>TALENT</span></a></li>
                    <li><a href="#"><span>SERVICES</span></a></li>
                    <li><a href="#"><span>MUSIC</span></a></li>
                    <li><a href="#"><span>BEATS</span></a></li>
                    <li><a href="#"><span>VIDEOS</span></a></li>
                    <li><a href="#"><span>CONTACT US</span></a></li>
                    </ul>
                    </center>
                </div>

            </nav>
        </div>
        <button class="menu-button" id="open-button"><img src="img/menubutt.png" height="42" width="42"><span>Open Menu</span></button>
        <div class="content-wrap">
            <div id="main">

            </div>
        </div><!-- /content-wrap -->
    </div><!-- /container -->
    <script src="js/jquery-3.2.1.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
<script src="js/ajax.js"></script>
    <script src="js/classie.js"></script>
    <script src="js/main.js"></script>

而且，这是我服务器上的网站测试：

https://trillumonopoly.com/testing

Answer 1

看起来我找到了错误的真正原因。

查看您的链接<li><a href="pages/home.php"><span>HOME</span></a></li> 更准确地说，在home.php

在您的JS中，您可以获得完整的链接，例如pages/home.php，然后再次添加.php，因此您的最终链接为pages/home.php.php，但不是pages/home.php

Answer 2

尝试更改

$('main').load('pages/' + page + '.php');

到

$('#main').load('pages/' + page + '.php');

您在#

开始时忘记了main

Answer 3

尝试更正页面变量上的网址以及您的主要错字：

$(document).ready(function () {
$('#main').load('pages/home.php');

    $('ul#navMenu li a').click(function() {
        var page = $(this).attr('href');//your href attribute is '#', which doesn't yield a correct path
        $('#main').load('pages/' + page + '.php');//$('#main') instead of $('main'), for id
        return false;
    }); 

});

使用Jquery / Ajax将页面加载到Div中（单击功能不起作用）

3 个答案: