Question

基本上我有一个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 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>

我的目标是基本上将一个div一次加载到主容器中，我知道加载函数可以立即加载整页但这不是我需要做的。

看了几个类似的问题，但似乎无法解决这个问题。

感谢所有人的帮助！

Answer 1

jQuery .load()函数允许您指定要加载的页面的一部分，而不仅仅是整个文档。

e.g。

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

查看jQuery load() documentation特别是“Loading Page Fragments”所在的位置。

Answer 2

要一个接一个地加载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，第二个等等。

使用这种方法，你将JS与HTML 分开，这总是好的。

Answer 3

jQuery load可以轻松加载页面片段，如此

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

Jquery加载外部HTML的一部分

3 个答案: