0

上部にナビゲーション リンクがあるサイトを構築しています。クリックすると、メイン コンテンツ div がスライドし、選択したコンテンツがスライドして表示されます。Safari と Chrome (Webkit) では問題なく動作しますが、Firefox や IE では動作しません。それらのブラウザーで機能しないのはなぜですか?

CSS:

#data, #data section {width:720px; height:600px;}
#data section {position:absolute; left:100%; margin-left:8px;}
#data {positon:relative; overflow:hidden;}
#data section:nth-child(1){left:0%}
#data section:nth-child(2){}
#data section:nth-child(3){}
#data section:nth-child(4){}

ナビゲーション ヘッダー:

<div id="header">
    <div id="headertop" class="headers">
            <img src="images/Autumns-header_01.png">
    </div>
    <div id="headermenu1" class="headers" data-section="one">
            <a data-section="one" href="#"><img src="images/Autumns-header_02_on.png" id="headerm1"></a>
    </div>
    <div id="headermenu2" class="headers" data-section="two">
            <a data-section="two" href="#"><img src="images/Autumns-header_03.png" id="headerm2"></a>
    </div>
    <div id="headermenu3" class="headers" data-section="three">
            <a data-section="three" href="#"><img src="images/Autumns-header_04.png" id="headerm3"></a>
    </div>
    <div id="headermenu4" class="headers" data-section="four">
            <a data-section="four" href="#"><img src="images/Autumns-header_05.png" id="headerm4"></a>
    </div>
</div>

メインコンテンツエリア:

<div id="data">
    <section id="one" class="active">
    ....
    </section>
    <section id="two">
    ....
    </section>
    <section id="three">
    ....
    </section>
    <section id="four">
    ....
    </section>
</div>

jQuery:

$('.headers').click(function () {
    var clicked = $(this).attr('id');
    var sectionId = $(this).attr("data-section");
    if (sectionId == 'one' || sectionId == 'two' || sectionId == 'three' || sectionId == 'four') {
        $('#headerm1').attr('src', 'images/Autumns-header_02.png');
        $('#headerm2').attr('src', 'images/Autumns-header_03.png');
        $('#headerm3').attr('src', 'images/Autumns-header_04.png');
        $('#headerm4').attr('src', 'images/Autumns-header_05.png');
    }
    switch (sectionId) {
        case 'one':
            $('#headerm1').attr('src', 'images/Autumns-header_02_on.png');
            break;
        case 'two':
            $('#headerm2').attr('src', 'images/Autumns-header_03_on.png');
            break;
        case 'three':
            $('#headerm3').attr('src', 'images/Autumns-header_04_on.png');
            break;
        case 'four':
            $('#headerm4').attr('src', 'images/Autumns-header_05_on.png');
            break;
        default:
            //alert(clicked);
            break;
    }
    event.preventDefault();
    $toSlide = $("#data section#" + sectionId),
    $fromSlide = $('.active');
    if (!($toSlide.hasClass("active"))) {
        $fromSlide.animate({
            "left": "-100%"
        }, 500, 'linear')
        $toSlide.animate({
            "left": "0%"
        }, 500, 'linear', function () {
            $fromSlide.css("left", "100%");
            $fromSlide.removeClass("active");
            $toSlide.addClass("active");
        });
    }
});
4

1 に答える 1

1

HTML 要素の data-section オプションの処理に関係している可能性があります。要素インデックス (対応するリスト内の要素の出現) を使用して、関連するセクションを開こうとしましたか。

例えば：

$('.headers').each(function(i){

    $(this).click(function(){

        $toSlide = $('.headers').eq(i);
        $fromSlide = $('.active');

        // rest of your code...

    })

})

上記のコードは、'sort-of' クロージャを使用しています。要素をループし.headers、反復のインデックスに基づいてクリック動作を割り当てます。あとは、関連する HTML 要素がページ上で正しい順序でリストされていることを確認するだけです。

event.preventDefault()また、テストを失います。

于 2013-09-16T16:11:31.047 に答える