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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Eine Möglichkeit ist die Verwendung von jQuery load-Funktion. Geben Sie Ihre navigation Anker einzigartigen ID ' s, und von dort aus können Sie code ähnlich wie diese:
Haben Sie einen Blick auf diese: http://api.jquery.com/load/
Hinzufügen href-Attribute der links zu den jeweiligen Seiten, die Sie besuchen möchten.
Dann sollte Folgendes lösen Ihr Problem über Jquery
mithilfe von jQuery