Question

我正在构建一个顶部有导航链接的网站，当点击时，主内容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");
        });
    }
});

Answer 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()并测试。

移动div不使用jQuery

1 个答案: