移動div不與jQuery合作

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元素中的數據部分選項有關。您是否嘗試過通過元素索引（相應列表中元素的出現）來打開相關部分。

例如：

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

    $(this).click(function(){ 

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

     // rest of your code... 

    }) 

}) 

上面代碼使用封閉件的 '排序的'。我們遍歷.headers元素，並根據迭代的索引分配它們的點擊行爲。然後，我們需要做的就是確保相關的HTML元素在頁面上以正確的順序列出。

另外，輸了event.preventDefault()並測試。