Page Reload jQuery Function 후에

Question

나는 잠시 동안이 문제로 어려움을 겪어 왔으며 해결책을 찾지 못했습니다. 나는 간단한 jQuery 함수를 사용하여 레스토랑의 메뉴에서 내용 요소를 페이드 인 및 페이드 아웃합니다. 유행은 완벽하게 작동하지만 페이지가 실행되면 페이지가 다시로드되고 다시 위로 이동합니다. 나는 여기에 제안 된 모든 종류의 해결책을 찾았지만 그들 중 누구도 일하지 않습니다. 나는 틀린 반환을 사용했다; 및 e.preventDefault(); 링크 HTML을 스팬 (Span)과 버튼 (Button)으로 바꾸지 만 그 중 아무 것도 작동하지 않습니다. 그것은 Wordpress에 대한 사용자 정의 테마 여기에 내가 가진 HTML입니다.

<div id="menu_nav"> 

<ul> 
<li><a href="#" id="mainattraction" class="current-link menu-link">Main Attractions</a></li> 
    <li><a href="#" id="seafoodcombos" class="menu-link">Seafood Combo's</a></li> 
<li><a href="#" id="harbouronaroll" class="menu-link">Harbour On A Roll</a></li> 
<li><a href="#" id="meangreens" class="menu-link">Mean Greens</a></li> 
<li><a href="#" id="appetizers" class="menu-link">Appetizers</a></li> 
<li><a href="#" id="kidsmenu" class="menu-link">Kids Menu</a></li> 
<li><a href="#" id="onthegrill" class="menu-link">On The Grill</a></li> 
<li><a href="#" id="soups" class="menu-link">Soups</a></li> 
</ul> 

</div> 

<div id="mainattractionscontent"> 
//content 
</div> 

<div id="seafoodcomboscontent"> 
//content 
</div> 

등 등

여기 내가 현재 사용하고 JQuery와있다

.

$('document').ready(function() { 

    $('.menu-link').click(function(event) { 
     var id = this.id + 'content'; 
     var link = this.id; 
     $('.active').fadeOut(600, function(){ 
      $('#' + id).fadeIn(600); 
      $('.active').removeClass('active'); 
      $('#' + id).addClass('active'); 
      $('.current-link').removeClass('current-link'); 
      $('#' + link).addClass('current-link'); 
      return false; 
     }); 
    }); 

}); 

또한 http://theharboursportsbar.com/the-menu 페이지를 참조하십시오. 도움에 미리 감사드립니다.

Answer 1

return false;은 페이드 아웃 콜백이 아닌 "클릭"처리기에 있어야합니다.

$('.menu-link').click(function(event) { 
    var id = this.id + 'content'; 
    var link = this.id; 
    $('.active').fadeOut(600, function(){ 
     $('#' + id).fadeIn(600); 
     $('.active').removeClass('active'); 
     $('#' + id).addClass('active'); 
     $('.current-link').removeClass('current-link'); 
     $('#' + link).addClass('current-link'); 
    }); 
    return false; 
}); 

는 event.preventDefault();를 호출하면 너무 작동,하지만 다시는 "클릭"처리기가 ​​아닌 애니메이션 콜백에서 발생한다.

Answer 2

실제로 링크의 기본 특성이 아닙니다. Pointy는 클릭 핸들러 외부에서 false를 이동해야한다는 점에서 옳다.하지만 실제 문제는 아니다.

콘텐츠를 페이드 아웃하면 페이지가 작아지고 대부분의 모니터/뷰포트에서 모든 내용이 한 페이지에 들어갈 수있을만큼 작아 지므로 페이지가 맨 위에 "뛰어 올라"있는 것처럼 보입니다. 현실, 가능한 모든 콘텐츠를 보여주고 있습니다. 그래서 기본적으로 문제는 fadeOut 함수의 본질에 있습니다. fadeOut 함수의 끝에는 display:'none' 페이지의 레이아웃에 영향을줍니다.

이 대신보십시오 :

$('.menu-link').click(function(event) { 
    var id = this.id + 'content'; 
    var link = this.id; 
    $('.active').animate({opacity:0},{duration:600, complete:function(){ 
     $('#' + id).css('display','block').animate({opacity:1},{duration:600}); 
     $('.active').removeClass('active').css('display','none'); 
     $('#' + id).addClass('active'); 
     $('.current-link').removeClass('current-link'); 
     $('#' + link).addClass('current-link'); 
    }}); 
    return false; 
});