Question

我正在使用javascript - ajax和jquery来加载php文件中的所有内容（#menu a）[见下面的'you.php']，而不是在页面中导航时刷新页面 - 这非常有效。

但是，如何在内容-A（加载并显示来自home.php的所有内容）上创建somesort的超链接，当它被点击时，它会重新定位＆amp;向用户显示settings.php（B）的内容。

请注意我的href超链接最后没有.php。 'general.js'文件解释了原因。

（you.php）：

        <div id="menu">

            <a href="home">Home</a>

            <a href="settings">Settings</a> // Content (A)

        </div>

        <div id="content"><div>

        <script src="./js/jquery-2.1.4.min.js"></script>

        <script src="./js/general.js"></script>

（general.js）：

$(document).ready(function() {

// initial content that will be loaded first upon logging in:

$('#content').load('home.php');

// handle menu clicks

$('#menu a').click(function(){

    var page = $(this).attr('href');

    $('#content').load(''  + page +  '.php');

    return false;

    });

});

（home.php）：

 <h1> welcome to homepage </h1>

 Would you like to go to your settings?

 Click here: <a href="settings.php>Settings</a>

显然，在home.php中执行这样的href超链接的问题是它直接进入了settings.php页面。这使得我的general.js（ajax）和jquery文件毫无意义。因为使用ajax和jquery的重点是平滑导航，并且在浏览网站时没有页面刷新。

和不，我不想在home.php的内容中加载settings.php的内容，'loadception'不是我想要的。

这是我的简单问题，我想在php，javascript，ajax中找到一个简单的答案。

有什么想法吗？

Answer 1

您需要使用事件委派。为了在我的示例中获得更好的性能，必须加载到＆＃34; #content＆＃34;有一个班级＆＃34;开放＆＃34;所以，在jquery你可以这样做：

$('#content').on('click', '.open', function(e) {
    e.preventDefault();

    var page = $(this).attr('href');
    $('#content').load(''  + page +  '.php'); // concat .php if it's only necessary
});

<强>更新我在github上创建了一个演示：http://jsbin.com/yimayaseni/1/edit?html,css,output

在导航时如何在不刷新页面的情况下将用户重定位到另一页面的内容？

1 个答案: