在同一页面的不同部分打开链接

Question

我的应用程序中有两个不同的 html 文件。 像这样的东西。

<a href="/conversations/<%= c['conversation']['id'] %>" class="list-group-item">
  <div id="nav">
   <p>This is link my second page</p>
  </div>
</a>

这是我的第二页。

div id="nav">
  <p>This is link my second page</p>
</div>

但是在这里，当我单击链接时，它会重定向到第二页。我想要的是当我单击要在同一页面的不同部分中打开第二个 html 的链接时。 像这样的东西。

我该怎么做？

Answer 1

html

 <div>
      <a class"links" href="https://www.yourlink.com/">link1</a>
      <a class"links" href="https://www.yourlink2.com/">link2</a>
    </div>

<div id="target_div">
  content here
</div>

jquery

$(document).ready(function() {

  $(".links").click(function(event) {
    event.preventDefault();
    var url = $(this).attr("href");
    console.log(url);
    $("#target_div").html('<iframe src="' + url + '" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" ></iframe>');
  });
});

试试这个

Answer 2

iframe 是您可以将其他 html 页面调用到您的网页中的标签

<iframe src="http://www.google.co.in" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
</iframe>