我有兩個名為homepage.html&的 html 文件dashboard.html，位于同一文件夾下的同一級別。我只想獲取特定的 div，因為我的主項目有很多 div。這是代碼homepage.html<html> <head> <meta charset="UTF-8"> <title>Homepage</title> <link rel="stylesheet" href="css/homepage.css"> </head> <body> <div class="homepage-side-menu"> <div id="homepage-home"> <label>Home</label> </div> <div id="homepage-dashboard"> <label>Dashboard</label> </div> </div> <div id="homepage-main-view"></div> <script src="js/homepage.js"></script> </body></html>這是代碼dashboard.html<html> <head> <meta charset="UTF-8"> <title>Dashboard</title> <link rel="stylesheet" href="css/dashboard.css"> </head> <body> <div class="dashboard-side-menu"></div> <div id="dashboard-main-view"></div> <script src="js/dashboard.js"></script> </body></html>我只想從 中獲取內(nèi)容并使用簡單的 JavaScriptdiv class="homepage-side-menu">顯示它。<div class="dashboard-side-menu"></div>
4 回答
慕村9548890
TA貢獻(xiàn)1884條經(jīng)驗 獲得超4個贊
首先，您必須引用您想要使用的文件。然后你用getElementByClass()
這是將 html 文件導(dǎo)入到另一個 html 中的方法
<link href="homepage.html" rel="import" />
或使用 JavaScript：
<script>
$(function(){
$("#addContentFromAnotherHTML").load("homepage.html");
});
</script>
你可以查看這樣的內(nèi)容：
<body>
<div id="addContentFromAnotherHTML"></div>
</body>
像這樣的東西：
var classData = document.getElementsByClassName('homepage-side-menu');
斯蒂芬大帝
TA貢獻(xiàn)1827條經(jīng)驗 獲得超8個贊
從 html5 開始你可以使用導(dǎo)入
<link rel="import" href="/path/to/imports/stuff.html">
在較舊的瀏覽器中，唯一的方法是使用 javascript（XHR、fetch 或 Jquery .load
HUX布斯
TA貢獻(xiàn)1876條經(jīng)驗 獲得超6個贊
使用 jQuery 你可以將其添加到dashboard.html：
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( ".dashboard-side-menu" ).load( "homepage.html .homepage-side-menu" );
</script>
慕慕森
TA貢獻(xiàn)1856條經(jīng)驗 獲得超17個贊
您可以通過多種方式在多個頁面之間共享 HTML 模板
1. jQuery - AJAX load() 方法
$(selector).load(URL,data,callback);
該load()方法從 URL 加載數(shù)據(jù)并將返回的數(shù)據(jù)放入所選元素中。
2. 服務(wù)器端包括使用一些服務(wù)器端編程語言
<? php?include?'header.php'; ?>
3. 使用一些構(gòu)建工具，如 gulp 或 grunt 或 webpack
4. 使用 HTML 導(dǎo)入
HTML 導(dǎo)入是一項令人興奮的技術(shù)，它有望改變我們構(gòu)建網(wǎng)站的方式。導(dǎo)入允許您將 HTML 文檔包含在其他 HTML 文檔中。
- 4 回答
- 0 關(guān)注
- 213 瀏覽
添加回答
舉報
0/150
提交
取消