Question

我正在使用.load来切换我的#content div中的内容，但是当我点击链接时，它会将我带到一个白页，说＆＃34;无法获取/索引＆＃34;管他呢。初始内容确实已加载，所以我知道前三行代码工作。任何想法为什么我＆＃34;无法得到＆＃34;我的其他文件？

这是我的HTML

<div id="nav">

    <ul>
        <li><a href="index">Home</a></li>
        <li><a href="portfolio">Portfolio</a></li>
        <li><a href="about">About</a></li>
    </ul>

</div>

和Jquery

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

    // handle menu clicks
    $('ul#nav li a').click(function() {
        var page = $(this).attr('href');
        $('#content').load('content/' + page + '.html');
        return false;
    });
});

Answer 1

以下是答案 -

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

// handle menu clicks
$('div#nav ul li a').click(function() {
    var page = $(this).attr('href');
    $('#content').load('content/' + page + '.html');
    return false;
});
});

很快，#nav是div而不是ul的ID，因此$('ul#nav li a').应该更$('div#nav ul li a'). $('div#nav > ul > li > a'). < / p>

如果你想要淡化动画，试试这个 -

$('div#nav ul li a').click(function() {
    var page = $(this).attr('href');
    $('#content').fadeOut('fast', function(){
        $('#content').load('content/' + page + '.html', function(){
            $('#content').fadeIn('fast');
        });
    });
    return false;
});

但是对于滑动动画来说，它会有点棘手，因为你必须做那样的事情 -

通过动画宽度向左滑动拳头
然后使用css left
加载并使宽度正常
更改left以使其再次向左滑动。

这将为您提供动画之间的空间，但如果您想要无空间动画，那么您将不得不使用更多的div和更多的逻辑。快乐的实验.. :)

Answer 2

根据您的编辑

你有一个错误的jQuery选择器，它应该是 -

$('#nav ul li a').click...

Answer 3

当内容动态加载时，直接.click（）函数不会捕获html元素上的操作所以：

使用$(document).on('click', 'ul#nav li a', function() {

而不是$('ul#nav li a').click(function() {

这为我工作

Jquery .load＆＃34;无法得到＆＃34;

3 个答案: