1

ここで奇妙な状況が発生しています.. ajax でコンテンツをロードしている 3 つのリンクがあります。これらの 3 つのリンクのいずれかを初めて押すと、コンテンツが下にスライドしますが、メイン メニューの位置に応じて、次の 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');
        }

    });
});

現在、リンクを順番に押すとすべてが正常に機能します: About us / Portofolio / Contact ですが、Portofolio リンクから始めて About us を押すと、About us が Portofolio の後にあることがわかりますが、その前にある必要があります。 ..最初からインデックスを設定したい..

ロードするときに、これらの 3 つのリンクのいずれかが以前に押された場合に依存せずに、インデックス 0、ポートフォリオ 1、連絡先 2 に About us を設定したい

解決策はありますか？または私は難しい方法でそれをしなければなりませんか？

4

1 に答える 1

1

問題は次の行にあるようです。

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

次のテキストのチャンクを前にあったものの終わりにやみくもに追加しているので、最初に Contact をクリックすると About Us の左側に表示されます。

他にも同様の問題が発生します。たとえば、リンクのいずれかをダブルクリックしようとすると、テキストが 2 回読み込まれる可能性があります。( if($('#content ul').html().trim().length == 0)最初のクリックと ajax リクエストが進行中の間はまだ true であるため、2 回目のクリックで ajax リクエストがトリガーされ、コンテンツが 2 回表示されます。)

アイデア1

これらすべての問題を回避する 1 つの方法は、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 に答える