Question

为了使我的情况更加清晰，我在主要的index.php中使用jQuery - AJAX来加载没有页面刷新的内容。

这是我的简化示例，这是我的主要index.php页面：

ActionBar actionBar = (ActionBarActivity)getActivity().getSupportActionBar();

这是我的将军.js

<!doctype html>

<div id="vis">
    <?php include( "./content/vis1.inc.php");?> //background part 1
</div>

<html>

<head>
    <title> Our website</title>
    <link rel="stylesheet" href="css/styles.css" /> // css style

</head>

<body>
    <ul id="nav">

        <li><a href="index">Home</a></li> // file in "Content" Folder
        <li><a href="about">About Us</a></li>// file in "Content" Folder
        <li><a href="contact">Contact</a></li> // file in "Content" Folder
    </ul>

    <div id="content">
        <div>
            <script src="js/jquery-2.1.4.min.js"></script> // file in "js" Folder
            <script src="js/general.js"></script> // file in "js" Folder
</body>

</html>

<div id="vis">
    <?php include( "./content/vis.inc.php");?> //background part 2
</div>

所以基本上所有3个页面都被加载了，在点击索引，关于我们和联系人链接时它没有刷新吗？（工作正常）

但是，我在＆＃34; content / index.php＆＃34;的内容中有一个href链接。（不是主要的index.php）所以一旦我点击：例如

$(document).ready(function() {
    // initial
    $('#content').load('content/index.php');

    // handle menu clicks
    $('ul#nav li a').click(function() {

        var page = $(this).attr('href');
        $('#content').load('content/' + page + '.php');
        return false;
    });
});

内部的

（content / index.php，主要的index.php）它直接进入联系页面，没有显示Main Index.php文件（其中包含ajax和javascript脚本）所以它就像我通常直接导航到一个php文件。

如何阻止这种情况发生？我只想要这个href链接：

 '<a href="contact.php">Contact us</a>'

to＆＃34;表现＆＃34;与MAIN index.php中的3个链接相同（其中包含Ajax，jquery脚本）。查看下面的目录以使其更有意义。我在某处读到了window.location，但我不确定它是什么或它做了什么，我的问题可能与window.location有关，也可能没有，但为了以防万一，我以为我会提起它。< / p>

我很难为这个问题找到合适的词语，所以我真的很道歉。

这是我的目录的布局。 C：\ Users \用户河底\桌面\ I-新\ htdocs中\ AJAX \

 '<a href="contact.php">Contact us</a>'

js（文件夹）

'index.php'     (main index php)

内容（文件夹）

'general.js
 jquery-2.1.4.min.js'

css（文件夹）

'index.php
 contact.php
 about.php'

谢谢。

Answer 1

将单击处理程序委托给#content元素，该元素将使用load来匹配与该href模式匹配的链接。

通过委托主要内容元素，您将考虑将在其中加载的未来元素

$('#content').on('click', 'a[href*="content/"]', function(event){
     event.preventDefault();//prevent browser following the link
     var contentUrl = $(this).attr('href');
     $('#content').load(contentUrl );    
});

用于目标的选择器是：Attribute Contains Selector

如何在AJAX中从一个内容导航到另一个内容？

1 个答案: