如何jQuery加載一個div到頁面上？

這可能有一個簡單的解決方案，但我是新的，無法弄清楚。我試圖從about.html加載一些文本到我的索引頁的#content div，當我點擊我的鏈接。除了名爲#content的div，about.html沒有任何東西，包含h2和段落標籤內的一些文本，沒有任何樣式。相反，它最終將加載索引的#content div內的整個索引頁面。到目前爲止，這是我的嘗試。我的索引頁面的名稱稱爲cube2。我知道代碼很混亂，但它只是一個實驗，並且懶得創建一個新的樣式表，把CSS放在doc中。我爲這個爛攤子道歉。如何jQuery加載一個div到頁面上？

Cube2.html代碼：

<html xmlns="http://www.w3.org/1999/xhtml" class=" -webkit-"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

<title>Cube2</title> 
<link href="./cube2_files/css" rel="stylesheet" type="text/css" data-inprogress=""> 
<script src="./cube2_files/jquery.min.js"></script> 
<!-- <script src="js/cube-centered.js"></script> --> 
<script type="text/javascript" src="./cube2_files/prefixfree.min.js"></script> 


<style type="text/css"> 
body { 
padding: 0; 
margin: 0; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-attachment: fixed; 
background-image: url(images/wallpaper-660816.jpg); 
background-repeat: no-repeat; 
background-position: center center; 
} 
.holoheader { 
background-image: url(images/Header.png); 
background-repeat: no-repeat; 
height: 600px; 
width: 700px; 
position: relative; 
margin-right: auto; 
margin-left: auto; 
color: #FFF; 
-webkit-animation: holowrapper ease 2s infinte; 
} 

.holowrapper { 
height: 600px; 
width: 700px; 
top: -110px; 
margin-right: 60%; 
margin-left: 40%; 
position: relative; 
/*-webkit-perspective: 1000px; 
-webkit-transform-style: preserve-3d; 
-webkit-transform: rotateY(45deg); */ 
-webkit-animation: bounce ease 1.0s infinite alternate; 
} 
@-webkit-keyframes bounce { 
    0% { top: -110px; } 
    100% { top: -105px; } 
} 
.holoheader h2 { 
font-family: 'Orbitron', sans-serif; 
font-size: 24px; 
color: #FFF; 
text-align: center; 
top: 23px; 
position: relative; 
} 
.hologram { 
font-family: 'Orbitron', sans-serif; 
height: 400px; 
width: 700px; 
margin-right: auto; 
margin-left: auto; 
position: relative; 
background-image: url(images/Filler.png); 
background-repeat: repeat-y; 
top: 68px; 
} 
.holofooter { 
background-image: url(images/Footer.png); 
height: 117px; 
width: 700px; 
position: relative; 
top: 70px; 
} 
.hologram #content { 
color: #FFF; 
text-align: center; 
overflow: scroll; 
overflow-x: hidden; 
height: 300px; 
width: 650px; 
padding-top: 15px; 
padding-right: 15px; 
padding-bottom: 15px; 
padding-left: 25px; 
} 
::-webkit-scrollbar { 
width: 12px; 
} 

::-webkit-scrollbar-track { 
background-color: #004040; 
opacity: 0.3; 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
border-radius: 10px; 
} 
::-webkit-scrollbar-thumb { 
-webkit-transition: background-color 0.5s ease 0s; 
background-color: #2A6964; 
border-radius: 10px; 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
::-webkit-scrollbar-thumb:hover { 
background-color: #B7EEF2; 
border-radius: 10px; 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
.header { 
height: 100%; 
width: auto; 
margin-left: auto; 
margin-right: auto; 
} 
.header #innerheader { 

} 
.header #innerheader #logo { 
margin-right: auto; 
margin-left: auto; 
height: 90px; 
width: 600px; 
margin-top: 10px; 
-webkit-animation: slidein 2s 1 normal, fadein 2.5s 1 normal; 
} 
@-webkit-keyframes slidein { 
    0% { margin-top: -100px; } 
    100% { margin-top: 10px;; } 
} 
@-webkit-keyframes fadein { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
#wrapper2 { 
min-width: 600px; 
} 
.navigationmenu { 
text-decoration: none; 
width: 250px; 
margin-left: 15px; 
padding: 5px; 
height: 90px; 
} 
.navigationmenu ul { 
font-family: 'Orbitron', sans-serif; 
font-size: 36px; 
list-style-type: none; 
margin: 0; 
padding: 0; 
-webkit-animation: glow 1.5s infinite alternate; 

} 
/*@-webkit-keyframes glow { 
    from { text-shadow: 0 0 0px #55A4AC; } 
    to { 
text-shadow: 0px 0px 25px #55A4AC; 
} 
} */ 
@-webkit-keyframes glow { 
    0% { text-shadow: 0 0 15px #55A4AC; } 
    100% { text-shadow: 0px 0px 25px #55A4AC; } 
} 
.navigationmenu ul:hover; { 

} 
.navigationmenu ul a { 
text-decoration: none; 
padding-top: 10px; 
padding-right: 5px; 
padding-bottom: 10px; 
padding-left: 5px; 
} 
a { 
color: #fff9d6; 
display: block; 
width: 60px; 
} 
</style> 

</head> 

<body> 

<div class="header"> 
<div id="innerheader"> 
<div id="logo"><img src="./cube2_files/Purelight.png" width="600" height="101"></div> 
</div> 
</div> 

<div id="wrapper2"> 
<div class="navigationmenu"> 
<ul id="nav"> 
    <li><a href="about.html" class="home">Home</a></li> 

    <li><a href="about.html" class="about">About</a></li> 

    <li><a href="about.html" class="services">Services</a></li> 

    <li><a href="about.html" class="portfolio">Portfolio</a></li> 
</ul> 
</div> 
<div class="holowrapper"> 
<div class="holoheader"><h2>Project FreeSky</h2> 
<div class="hologram"> 
<div id="content"> 
    <p>Home</p> 
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. 

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p> 
</div> 

<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
<script src="js/general.js"></script> 
<div class="holofooter"></div> 
     </div> 
    </div> 
</div> 
</div> 



</body> 

</html>

關於HTML。

<!-- about.html code -->  
<html>  
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>About</title> 
</head> 

<body> 
<div id="content"> 
<h2>About</h2> 
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. 

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p> 
    </div> 
</body> 
</html>

的Javascript

// JavaScript 
$(document).ready(function() { 
$('#content').load('content/cube2'); 



$('ul#nav li a').click(function() { 
    var page = $(this).attr('href'); 
    $('#content').load('#content/' + page + '.html'); 
    return false; 

}); 
});

來源

2014-07-08 Leto

查看您的About.html代碼。您不能重複標籤。清除About.html中的HTML代碼（您正在附加HTML代碼而不是整個HTML頁面）。 –

我認爲你的方法很好，但源頁面應該只包含你需要的內容，所以沒有頭部，身體，標題標籤等 – andrew

不應該是.load（'content /'+ page +'。html #content' ）？ jQuery支持只加載頁面的一部分（好吧，它加載所有隻使用它的一部分，但嘿..） – masch

如果加載HTML應該只包含一個子集，我覺得你可以這樣做：

$.get(page + '.html', function(d) { 

    var content = $(d).find("#content"); 
    content.appendTo("appendselector"); 

});

你從服務器獲取內容，解析它作爲jQuery中的文檔片段，然後將內部內容追加到任何你想要的地方。

來源

2014-07-08 12:39:57

您可以使用此：

$('ul#nav li a').click(function() { 
    var page = $(this).attr('href'); // outputs = about.html 
    $('#content').load(page + ' #content'); // <- targets the html page's div 
    return false; 
});

但我的建議是使用父頁面DIV的東西不同的ID喜歡#pageContent因此，在標記有將只是一個#content格：

$('ul#nav li a').click(function() { 
    var page = $(this).attr('href'); // outputs = about.html 
    $('#pageContent').load(page + ' #content'); // <- targets the html page's div 
    return false; 
});

來源

2014-07-08 12:52:06 Jai

這似乎是有道理的，但沒有加載。我測試過.click功能，當它檢測到一個被點擊的鏈接時就發出警報，並且它可以工作。然而之後沒有任何加載。也許我錯過了一些東西，比如我需要一個活的服務器來測試它或者什麼？如果是這樣，那麼爲什麼它之前加載了其他東西..我從about.html中刪除了所有標記，它仍然執行相同的操作，或者使用您的代碼版本，沒有加載任何內容。我不知道，代碼似乎對我有意義。 – Leto

@SuperLeetFail看到你正在做一個ajax請求來填充內容，並且ajax需要一個web服務器來工作，所以這對於讓一個web服務器或localserver來測試是絕對必要的。 – Jai

好吧，那一定是，謝謝你的幫助！ – Leto

如何jQuery加載一個div到頁面上？

回答

相關問題