2012-06-21 6 views
5

Basicily Ich habe eine index.html unten ..JQuery Lastteil von externen HTML

<html> 

<head> 

<title>UI Test: Main Menu</title> 

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="general.js"></script> 

</head> 

<body> 

<input type="button" value="Details" onclick="javascript:$('#mainContainer').load('loadpage.html #name1div *');"/><br> 
<div id="mainContainer">   

</div> 

Die loadpage.html cotaints

<div id="nav1div><h3>1 DIV </h3> </div> 
<div id="nav2div><h3>2 DIV </h3> </div> 
<div id="nav3div><h3>3 DIV </h3> </div> 
<div id="nav4div><h3>4 DIV </h3> </div> 

Und mein Ziel ist es, 1 der divs grundsätzlich in den Hauptcontainer zu laden, ich weiß, dass die Ladefunktion die ganze Seite bei on laden kann Aber das ist NICHT, was ich tun muss.

hatte ein paar Blick auf ähnliche Fragen, aber kann nicht scheinen, dieses Problem zu beheben ..

Alle Hilfe Danke Jungs zu schätzen wissen!

+0

Welchen Fehler bekommen Sie? – xdazz

Antwort

10

Die jQuery .load() Funktion, die Sie ein Teil einer Seite festlegen kann, laden, anstatt nur das gesamte Dokument.

z.B.

$('#mainContainer').load('loadpage.html #nav1div'); 

bestellen here und navigieren Sie zu dem Abschnitt „Laden Seite Fragments“ betitelt unten.

+0

@ user983969 Ich verstehe nicht, das OP wollte die divs nicht nacheinander bei jedem Klick? – Cranio

+0

Dieser Code löst es, als wäre es das Javascript, das ich in jeden Putto einlege, um jedes div zu laden – LmC

+0

@ user983969 Ok, also willst du sie * selektiv * laden, das war mir nicht klar, ich dachte, du würdest sie wollen * progressiv *, eine nach der anderen, bei jedem Klick auf die * selbe * Taste – Cranio

2

jQuery load leicht Seite Fragmente laden, wie so

$('#mainContainer').load('loadpage.html #nav1div'); 
3

Um DIVs nacheinander zu laden, einen Zähler definiert

var curDiv = 1; // current Div 

irgendwo am Anfang (besser, eine $(document).ready() Funktion zu definieren, es zu initialisieren). definieren diese Funktion:

function loadThing() 
{ 
    if (curDiv<5) $('#mainContainer').load('loadpage.html #nav' + (curDiv++) + 'div'); 
} 

das Click-Ereignis definieren wie:

$("input#getdiv").click(loadThing); 

und Sie Taste wie:

<input id="getdiv" type="button" value="Details" /> 

Mit jedem Klick sollten Sie zuerst div erhalten, die zweite und so auf.

Mit diesem Ansatz Sie separate JS aus HTML, die immer gut ist.

+0

ANMERKUNG: Ich freue mich für die Upvotes, aber bei weiteren Recherchen stellte sich heraus, dass das OP mehr Buttons benötigt, einen für jeden DIV (es war absolut nicht klar in der Frage), was das unnötig macht (Laden einer Seite) Fragment auf dem Click-Ereignis jeder Schaltfläche ist genug). Also nimm meine Antwort als allgemeine Annäherung. – Cranio

Verwandte Themen