javascript - 使用 javascript 和 php 更改 div 内容

Question

我试图在单击时将以下 div 替换为名为 file.php 的文件中的类似 div。 div 标签是..

<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>

JavaScript 函数是..

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

file.php 看起来与上面的 div 完全一样。谁能告诉我哪里出错了。 ps，我想在单击时用多个 file.php 文件替换 div 并进行无缝过渡。谢谢。

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;
});

希望对您有帮助!