이동 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 요소의 data-section 옵션 처리와 관련이있을 수 있습니다. 요소 색인 (해당 목록에있는 요소의 출현)을 사용하여 관련 섹션을 열어 보았습니다. 예를 들어

:

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

    $(this).click(function(){ 

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

     // rest of your code... 

    }) 

}) 

위의 코드는 폐쇄 '정렬의'사용합니다. .headers 요소를 반복하고 반복 색인에 따라 클릭 행동을 할당하십시오. 그런 다음 관련 HTML 요소가 올바른 순서로 페이지에 나열되어 있는지 확인해야합니다.

또한 event.preventDefault()을 분실하고 테스트하십시오.