样品

Question

我正在尝试在单击时在名为file.php的文件中用类似的div替换以下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;
});

我希望这有用！

使用javascript和php更改div内容

1 个答案:

样品