1

我在这里遇到了一个奇怪的情况。我有三个链接正在使用 ajax 加载内容。第一次按下这三个链接中的一个时，内容会向下滑动，但我希望下一个 li 根据它们在主菜单中的位置向左/向右设置动画。现在它们被附加到#content 元素中。

我想要的是从一开始就给加载的内容一个特定的索引..作为出现在主菜单中的索引..

你可以在http://www.open mind.ro/看到一个例子

这是我现在正在使用的脚本：

// JavaScript Document
$(document).ready(function(){
    $("#main-menu a").click(function(e){
        e.preventDefault();

        var $a = $(this);
        var $clicked = $a.attr('href').substr(1);

        if($('#logo').hasClass('unmoved')) {
            $('#logo').animate({marginTop:'30px'}, 500, function(){
                $a.removeClass('unmoved').addClass('moved');
            }); 
        }

        $("#main-menu .active").removeClass('active');
        $a.addClass('active');

        if($('#content ul li.' + $clicked).length == 0) {
            $.ajax({
                url: '/resources/ui' + $(this).attr('href') + '.php',
                cache: false
            }).done(function(html) {
                if($('#content ul').html().trim().length == 0) {
                    $("#content ul").html(html).find('li').slideDown(500);
                } else {
                    $("#content ul").css('width',($("#content ul").width() + 900) + 'px');
                    $('#content ul').append(html).find('li.' + $clicked);
                    $a.trigger('click');
                }
            });
        } else {
            $('#content ul').animate({left:-$('#content ul li.' + $clicked).index() * 900 + 'px'}, 500, 'easeInQuart');
        }

    });
});

现在，如果您按顺序按链接，一切正常：关于我们/投资组合/联系但如果您从投资组合链接开始，然后按关于我们..您会看到关于我们在投资组合之后，但它必须在它之前..我想从一开始就设置它的索引..

当我加载它时，我想在索引 0、投资组合 1 和联系人 2 处设置关于我们，而不依赖于这三个链接之一是否已被按下

有解决办法吗？或者我必须以艰难的方式做到这一点？

4

1 回答 1

1

问题似乎出在这一行：

$('#content ul').append(html).find('li.' + $clicked);

它会盲目地将下一段文本附加到之前的任何内容的末尾，因此如果您先单击“联系”，它将位于“关于我们”的左侧。

还有其他类似的问题也会出现，例如尝试双击任何一个链接，您可能会看到文本加载两次。（ if($('#content ul').html().trim().length == 0)在第一次 click&ajax 请求正在进行时仍然是 true，所以第二次点击会触发 ajax 请求，现在有两次内容。）

理念一

解决所有这些问题的一种方法是忘记使用 ajax 而只是预加载所有内容。

想法 2

如果你需要使用 ajax...
因为你知道总是有 3 个文本部分，我建议你预先加载所有的<li>标签，然后在每个按钮被点击时填写它们。我使用.data()jquery 中的方法将按钮链接到正确的容器。

你的 index.php 页面可以像这样开始：

<div id="main-menu">
    <a data-container=".about-us" href="/about-us">About us</a>
    <a data-container=".portfolio" href="/portofolio">Portofolio</a>
    <a data-container=".contact" href="/contact">Contact</a>
</div>
<div id="content">
    <ul>
        <li class="module about-us"></li>
        <li class="module portfolio"></li>
        <li class="module contact"></li>
    </ul>
</div>

$('#main-menu a').click(function() {
    var target = $(this).data('container');
    $.ajax({
        // request setup ...
    }).done(function(html) {

        $(target, '#content').html(html);

        // animate and stuff ...
    });
});
于 2012-12-30T20:46:12.057 回答