使用像iframe这样的div标签

Question

  

我想通过点击导航<div id="content">中的链接，将我的网络目录中的不同（about.html，home.html，pics ...）HTML网页加载到<div id="content">。

如何做到这一点？我是CSS / HTML的新手。我不想使用iframe。

Answer 1

您可以这样做：

的jQuery

$("#nav a").on( "click", function(e) {

  e.preventDefault(); // prevent the default event, so it doesn't actually go to that page.
  var url = $(this).attr("href"); // this should be some-page.html in this example.

  $("#content").load( url ); // where we're adding the new html.

});

HTML

<ul id="nav">
    <li>
        <a href="some-page.html">Some page</a>
    </li>
</ul>

和

还包括：

<div id="content">
    content will be loaded here
</div>

Answer 2

您可以使用jQuery及其功能 .load() ，如下所示：

<强> HTML

<span data-url="somepage.html" class="link">link 1</span>
<span data-url="somepage2.html" class="link">link 2</span>

<强>的jQuery

$(".link").click(function(){

    $("#content").load($(this).data('url'));

});

Answer 3

   //this
    <header></header>
    <section>
     <div class="leftside"></div>
     <div class="right"></div>
     <div class="rightside"></div>
   </section>
    <footer></footer>

Answer 4

#nav{word-wrap:break-word;overflow:hidden;padding:5px 10px;position:relative;float:left;}