dongxia5394
2017-10-09 02:25
浏览 60
已采纳

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

Trying to get content from other pages to load into specific Div from url on click . But for some reason it will not work. The link keeps forwarding to the page instead of opening in the div. On top of that the initial load code works. It loads the initial content. after setting an alarm to notify my when I click the link with the desired content it sends the alert. Then I put return false; at the end and now it doesn't load anything. What am I doing wrong. Im using the code that I used a year ago on here. but now its not working on my new website. Please help me determine how to fix this.

Here is my AJAX code:

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

});

Here is my 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>

And, here's the website testing on my server:

https://trillumonopoly.com/testing

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

3条回答 默认 最新

  • duanke2503 2017-10-09 03:23
    最佳回答

    Looks like I found the real reason of your error.

    Take a look at your link <li><a href="pages/home.php"><span>HOME</span></a></li> To be more precise, at home.php

    In your JS you get full link, e.g. pages/home.php, then you add to it .php one more time, so your final link is pages/home.php.php, but not pages/home.php

    评论
    解决 无用
    打赏 举报
查看更多回答(2条)

相关推荐 更多相似问题