2012-06-21 27 views
5

Basicily tôi đã một index.html hình dưới đây ..Jquery tải Một phần của HTML ngoài

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

Các cotaints 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> 

Và mục tiêu của tôi là tải một cách cơ bản 1 trong số các div tại một thời điểm vào vùng chứa chính, tôi biết chức năng tải có thể tải toàn bộ trang ở trên nhưng đây không phải là những gì tôi cần làm.

Có một vài câu hỏi tương tự nhưng không thể giải quyết được điều này ..

Tất cả trợ giúp đều được đánh giá cao cảm ơn các bạn!

+0

Bạn gặp phải lỗi gì? – xdazz

Trả lời

10

Các jQuery .load() chức năng cho phép bạn chỉ định một phần của một trang để tải, chứ không phải chỉ toàn bộ tài liệu.

ví dụ:

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

Kiểm tra xem here và cuộn xuống phần có tiêu đề "Tải phân đoạn trang".

+0

@ user983969 Tôi không hiểu, OP không muốn các div cái khác trên mỗi nhấp chuột? – Cranio

+0

Mã này giải quyết nó vì nó sẽ là javascript tôi đặt vào mỗi putton để tải mỗi div – LmC

+0

@ user983969 Ok vì vậy bạn muốn tải chúng * chọn lọc *, điều đó không rõ ràng đối với tôi, tôi nghĩ bạn muốn chúng * dần dần *, cái khác, mỗi lần nhấp vào nút * cùng * – Cranio

2

jQuery load có thể dễ dàng tải các mảnh trang, như vậy

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

Để tải DIV cái khác, xác định một bộ đếm

var curDiv = 1; // current Div 

đâu đó ngay từ đầu (tốt hơn để định nghĩa một hàm $(document).ready() để khởi tạo nó). Xác định chức năng này:

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

Xác định sự kiện click như:

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

và bạn nút như:

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

Với mỗi nhấp chuột, bạn sẽ nhận được div nhất, nhì, vv trên.

Với cách tiếp cận này, bạn JS riêng biệt từ HTML, điều này luôn tốt.

+0

GHI CHÚ: Tôi rất vui vì những người ủng hộ, nhưng khi nghiên cứu sâu hơn, OP muốn có nhiều nút hơn, một nút cho mỗi DIV (điều này hoàn toàn không rõ ràng trong câu hỏi), khiến việc này không cần thiết (tải trang mảnh trên sự kiện nhấp chuột của mỗi nút là đủ). Vì vậy, lấy câu trả lời của tôi như là một cách tiếp cận chung. – Cranio

Các vấn đề liên quan