изменить содержимое div с помощью javascript и php

Question

Я пытаюсь заменить следующий div на аналогичный div в файле с именем file.php при нажатии. DIV тег ..

<div style="display: none;" id="extra" class="container2" xml:id="page"> 
 
\t \t <div class="title"> 
 
\t \t \t <h2>Stuff to check out</h2> 
 
\t \t \t <span class="byline">gotta gets that money</span> </div> 
 
\t \t <div id="three-column"> 
 
\t \t \t <div class="boxA"> 
 
\t \t \t \t <div class="box"> <span class="fa fa-cloud-download"></span> 
 
\t \t \t \t \t <p>Praesent pellentesque facilisis elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="boxB"> 
 
\t \t \t \t <div class="box"> <span class="fa fa-cogs"></span> 
 
\t \t \t \t \t <p>Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="boxC"> 
 
\t \t \t \t <div class="box"> <span class="fa fa-user"></span> 
 
\t \t \t \t \t <p> Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <ul class="actions"> 
 
\t \t \t <li><a id="addContent" href="#" class="button">Close</a></li> 
 
\t \t </ul> 
 
</div>

функция JavaScript есть ..

$('#addContent').click(function(){ 
 
    $("#extra").load("file.php"); 
 
    return false; 
 
});

file.php выглядит точно так же, как выше дел. может кто-нибудь сказать мне, где я иду не так. ps, я хочу заменить div несколькими файлами file.php при щелчке с плавным переходом. Благодарю.

Answer 1

Ваш код не заменит div#addContent, но он поставит подобный divвнутриdiv#addContent. Чтобы заменить его аналогичным div, поместите его в контейнер и затем загрузите аналогичный файл div из файла PHP в контейнер.

ОБРАЗЦА

<div id="container"> 
    <div style="display: none;" id="extra" class="container2" xml:id="page"> 
      <div class="title"> 
       <h2>Stuff to check out</h2> 
       <span class="byline">gotta gets that money</span> </div> 
      <div id="three-column"> 
       <div class="boxA"> 
        <div class="box"> <span class="fa fa-cloud-download"></span> 
         <p>Praesent pellentesque facilisis elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p> 
        </div> 
       </div> 
       <div class="boxB"> 
        <div class="box"> <span class="fa fa-cogs"></span> 
         <p>Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis.</p> 
        </div> 
       </div> 
       <div class="boxC"> 
        <div class="box"> <span class="fa fa-user"></span> 
         <p> Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus.</p> 
        </div> 
       </div> 
      </div> 
      <ul class="actions"> 
       <li><a id="addContent" href="#" class="button">Close</a></li> 
      </ul> 
    </div> 
</div> 

, а затем,

$('#addContent').click(function(){ 
    $("#container").load("file.php"); 
    return false; 
}); 

Я надеюсь, что было полезно!