Ajax 메뉴에서 링크를 누르면 jquery에로드됩니다.

Question

저는 Jquery와 Ajax를 처음 사용하여 1 시간 넘게 문제를 해결하려고했습니다.

현재 페이지 볼 수 있습니다

: http://smartcreations.se/test/test.html (당신이 녹색 영역을 클릭하면 내가 그것을 갖고 싶어하는 효과가 있습니다.) 난의 메뉴를 사용할 수 없습니다를 제외하고 내가 원하는

는 거의 모든 작품을 상단에는 녹색 div를 클릭 할 때와 같이 내용을 채우고로드 할 상자가 있어야합니다.

그래서 내가 너희에게 바라는 것은 내가 이것을 해결할 수있는 방법에 대한 의견, 또 다른 관점이다.

$(window).load(function(){ 
$(".box").click(function(){ 
$(this).animate({ 
top: '-50%' 
}, 500, function() { 
$(this).css('top', '150%'); 
$(this).appendTo('#container');    
$(".loadinghere").load($(this).attr('name')); 
}); 
$(this).next().animate({ 
top: '50%' 
}, 500); 
}); 
}); 

이것은 내가 얻은 가장 가까운 링크이지만 전혀 작동하지 않습니다.

Answer 1

e를 사용하여 상자에서 클릭 만 위조 할 수 있습니다. 지.

$("#box1").click(); 

하지만 난 그게 완전히 다른 할 것 :

<a href="107.html?nr=2" class="show">About me!</a> 
<a href="108.html?nr=2" class="show">Portraits</a> 
<a href="107.html?nr=2" class="show">Weddings</a> 
<a href="109a.html?nr=2" class="show">Action</a> 


<script type='text/javascript'> 
$(document).load(function(){ 
    $("a.show").on("click", function(e){ 
     e.preventDefault(); 
     var click=$(this); 
     var link=click.attr("href")+"#box"; 
     $("#box").after("<div id='box2' />").load(link, function(){ 
      $(this).animate({ 
       // your effect and stuff 
      }); 
      // Rename the new box and throw out the old one 
      // Make sure, it is not visible 
      $("#box").remove(); 
      $("#box2").attr("id","box"); 
     }); 
    }); 
}); 
</script> 

아이디어는 전체 HTML을 사용하고 #box 중 단지 HTML을 추출하고 현재 페이지를 삽입합니다. 새로운 히스토리 API 또는 앵커를 사용할 수도 있습니다. 주요 이점은 JS가 돌아 왔을 때 여전히 페이지를 사용할 수 있다는 것입니다. (미스)이 이름 또는 다른 HTML 특성을 사용하여 정말 나쁜 연습입니다. 필요한 경우 data 속성을 사용하십시오.

(코드는 테스트되지 않았으므로 빠르고 간단하게 아이디어를 얻을 수 있습니다.)