Question

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

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

您可以在http://www.openminded.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');
        }

    });
});

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

当我加载它时，我想在索引0，Portofolio 1和Contact 2设置关于我们，而不依赖于这三个链接之一是否已被按下

有解决方案吗？或者我必须以艰难的方式去做？

Answer 1

问题似乎在于这一行：

$（'＃content ul'）。append（html）.find（'li。'+ $ clicked）;

它会盲目地将下一个文本块附加到之前的任何内容中，所以如果您单击“首先联系”，它将位于“关于我们”的左侧。

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

想法1

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

想法2

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

你的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 ...
    });
});

使用jQuery在特定索引处插入html内容

1 个答案:

想法1

想法2