Question

我已经创建了一个html页面，（模板，如果你愿意的话）所以我想做的就是让页面全部保留在自己的页面上，并使用AJAX / jQuery将div元素与其他外部html页面一起传播。

这可能吗？

我一直在检查，我还没有找到解决方案。

以下是我的导航列表的片段...

<div>
  <ul>
     <li id="n-c"><span class="dir">Cosmo</span>
        <ul id="switcheroo">
            <li class="first"><a href="pg1.html">Special</a></li>
            <li><a href="pg2.html">Mineral</a></li>
            <li><a href="pg3.html">Lateral</a></li>
            <li><a href="pg4.html">Tangent</a></li>
        </ul>
     </li>
  </ul>
</div>

在我的内容部分，我添加了

<div id="contentSwap"></div>

我试过了：

$("ul #switcheroo li a").click(function(event) {
  var $parent = $(this).parent();
  $parent.addClass("selected").siblings().removeClass("selected");
  var href = $(this).attr('href');
  $.get(href, function(data) {
    $('#contentSwap').html(data);
  });
  event.preventDefault();
  return false;
});

无济于事，有人可以帮助我吗？

WDH

最后我最终使用最简单的形式来实现我的结果。

<script type="text/javascript">

    $(document).ready(function() {
       $("#switcheroo").click(function(event){
           $('#contentSwap2').load('pg2.html');
       }); 
    });

    $(document).ready(function() {
       $("#switcheroo2").click(function(event){
           $('#contentSwap3').load('pg3.html');
       }); 
    });

</script>


                   ... and so on ...

最终将div id与已经包含内容的div进行交换，而不是使用空标记。

WDH

我很欣赏你的所有见解@ abdullah.abcoder @ShankarSangoli和@John Hartsock

Answer 1

假设您的数据是HTML，那么您可以使用jQuery replaceWith()执行以下操作：

$('#contentSwap').replaceWith(data);

此外，您可能只想通过执行以下操作从数据中导入HTML部分：

$('#contentSwap').replaceWith($('#somedivElement', data));

Answer 2

$("ul #switcheroo li a").click(function(event) {
    var $parent = $(this).parent();
    $parent.addClass("selected").siblings().removeClass("selected");
    var href = $(this).attr('href');
    $('#contentSwap').load('' + href + ''); //$('#contentSwap').empty().load(''+ href +''); you may use this for make your `#contantSwap` empty and then append contents to it
    event.preventDefault();
    return false;
});

我希望这会有效

Answer 3

当您在get回调中获得html响应时，它将包含从html，head body等开始的所有标记。要么您必须确保只从服务器发送所需的标记或解析标记并获取只有您想要附加到 contentSwap div的标记。

另一种方法是使用iframe，将iframe源设置为href，iframe的onload找到所需元素，获取标记，然后将其附加到 contentSwap div。

$("ul #switcheroo li a").click(function(event) {
  var $parent = $(this).parent();
  $parent.addClass("selected").siblings().removeClass("selected");
  var href = $(this).attr('href');
  var dIf = $("#dummyIframe");

if(dIf.length == 0){
    $(document.body).append('<iframe id="dummyIframe" style="display:none;"></iframe>');
     dIf = $("#dummyIframe").onload(function(){
        var iFrameContent = $("#dummyIframe").contents();
        $('#contentSwap', window.parent.document)
        .html(iFrameContent.find('#someDivIdOrAnyOtherSelector').html());
      });
 }
 dIf[0].src = href;

      event.preventDefault();
      return false;
    });

动态替换div的问题

3 个答案: