7

基本的に、以下に示すindex.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>

loadpage.html コンテンツ

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

そして、私の目的は、基本的に一度に 1 つの div をメイン コンテナーにロードすることです。ロード関数がページ全体を一度にロードできることはわかっていますが、これは私が行う必要があることではありません。

同様の質問をいくつか見ましたが、これを解決できないようです..

すべての助けに感謝します！

4

3 に答える 3

15
于 2012-06-21T08:58:33.433 に答える
4

DIV を次々にロードするには、カウンターを定義します

var curDiv = 1; // current Div

最初のどこかに（$(document).ready()初期化する関数を定義する方が良い）。この関数を定義します。

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

クリック イベントを次のように定義します。

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

そして、あなたは次のようにボタンを押します：

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

クリックするたびに、最初の div、2 番目などを取得する必要があります。

このアプローチでは、 JS を HTML から分離します。これは常に適切です。

于 2012-06-21T09:00:27.357 に答える
2

jQueryloadはページ フラグメントを簡単にロードできます。

$('#mainContainer').load('loadpage.html #nav1div');
于 2012-06-21T08:58:25.657 に答える