Question

希望有人可以帮我解决这个问题，

我使用代码

创建了JSFiddle

我创建了一个带有标题的网站的基本代码，带有六个链接的导航菜单，主要div和右侧边栏，

我希望实现的是当用户点击导航菜单上的六个页面链接之一时（例如点击page4.html）。

点击该页面链接的内容（例如page4.html）被加载到主div而没有页面的其余部分（即标题，导航，右侧边栏），根本不刷新。

在用户点击其他链接（例如page4.html）之前，该div应保留显示内容（例如page6.html）。

然后，只有主div中的内容应该从（例如page4.html更改为page 6.html），而不会重新加载/刷新页面

希望我已经能够清楚地了解我需要做的事情。

以下是代码：

＆＃13;

.header {
  text-align: center;
  width: 100%;
  height: 90px;
}

.nav {
  float: left;
  width: 20%;
  height: 500px;
  background: grey;
}

.main {
  float: left;
  width: 60%;
  height: 500px;
  background: lightblue;
}

.rightsidebar {
  float: right;
  width: 20%;
  height: 500px;
  background: lightgreen;
}

＆＃13;

<body>
  <div class="container">
    <div class="header">Site name</div>
    <div class="nav">
      <ul>
        <li><a href="#">Page1.html</a>

        </li>
        <li><a href="#">Page2.html</a>

        </li>
        <li><a href="#">Page3.html</a>

        </li>
        <li><a href="#">Page4.html</a>

        </li>
        <li><a href="#">Page5.html</a>

        </li>
        <li><a href="#">Page6.html</a>

        </li>
      </ul>
    </div>
    <div class="main">This is the Main Div that will load either page1.html -> page6.html depending on which Nav link the user clicks.. Note that when user clicks the nav link.. Only this div should reload with the content of said clicked page. i.e. If user clicks page4.html
      link in nva menu. This lightblue div will change from whats written here now and load the content from page4.html in this div but the header, Nav, and rightsidebar of the page will stay static and not refresh at all.</div>
    <div class="rightsidebar">blah blah blah blah blah</div>
  </div>

＆＃13;

Answer 1

将href属性添加到指向您要访问的相应页面的链接。

<li><a href="Page1.html">Page1.html</a></li>
<li><a href="Page2.html">Page2.html</a></li>

然后以下内容应通过 Jquery

解决您的问题

$(function(){
    $(".nav li a").click(function(e){
        e.preventDefault(); //To prevent the default anchor tag behaviour
        var url = this.href;
        $(".main").load(url);
    });
});

Answer 2

一种选择是使用jQuery的加载功能。为您的导航锚点提供唯一的ID，然后您可以使用与此类似的代码：

$(function () {
    $("#nav_page_a").on("click", function () {
        $("#main").load("PageA.html");
    });
    $("#nav_page_b").on("click", function () {
        $("#main").load("PageB.html");
    });
});

看看这个：http://api.jquery.com/load/

Answer 3

使用jQuery

$(".main").load("yourpage.html");

单击时加载div中链接的页面内容

3 个答案: