Laden Sie die Seite, die Inhalte der link im div, wenn darauf geklickt

In der Hoffnung, jemand könnte mir helfen mit diesem Problem,

Habe ich eine JSFiddle mit dem code

Ich habe einige basic-code von einer Website mit einem header -, Navigations-Menü mit sechs links, die Haupt-div und rechts eine sidebar,

Was ich Suche, zu erreichen, ist, dass, wenn ein Benutzer klickt auf eine der sechs Seiten-links auf der nav-Menü (e.g-Klicks page4.html).

Den Inhalt aus dieser Seite ein link, der geklickt wurde (e.g page4.html), geladen wird in das main-div, ohne den rest der Seite (ich.e-header, nav, rechts Seitenleiste), erfrischende überhaupt.

Dass div bleiben soll, um zu zeigen, dass die Inhalte (e.g page4.html), bis der Benutzer klickt auf einen anderen link (e.g page6.html).

Dann nur der Inhalt in der main-div soll sich ändern von (e.g page4.html zu page 6.html) ohne andere Inhalte Neuladen/wiederauffrischen der Seite

Ich hoffe, dass ich in der Lage gewesen, es klar genug, was ich tun müssen.


Hier ist der code:

CSS:

.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;
}

HTML:

<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>

  • warum mit div statt iframe?
  • ich versuche, bleiben Sie Weg von Ihnen ideal. Aber ich könnte ein iframe-Element, wenn nötig, solange, wenn der link angeklickt wird nur der iframe geladen wird in der div und die Seite nicht aktualisieren
  • Sie beschreiben, kann man mit ajax-call.
InformationsquelleAutor user2897821 | 2014-10-29
Schreibe einen Kommentar