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...

    })

})

上面的代码使用了“某种”闭包。我们循环遍历.headers元素，并根据迭代的索引分配它们的点击行为。然后，我们需要做的就是确保相关的 HTML 元素在页面上以正确的顺序列出。

另外，输掉event.preventDefault()和测试。

于 2013-09-16T16:11:31.047 回答