[英]How to load an html inside main index html on button click
用例 ：
我設計了使用HTML和CSS \\ Js的sidbar導航，如下所示。 讓我們命名這個index.html
我還有另一個HTML，例如Dashboard.html ，其布局如下所示
現在，如果我單擊index.html中的 “ Live Execution” ，則儀表板.HTML應該在主index.HTML中顯示內容，而不會干擾邊欄導航和標題
我是UI編碼的新手，所以我對所有可用的選項感到困惑，我該如何實現以上結果！
更新的代碼-使用Jquery
我能夠通過@Hien Nguyen提供的輸入解決此問題
我必須在函數load（）起作用之前放置一個div類，然后引用該div類來調用load（）
INDEX.HTML
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" area-expandable="false" class="dropdown-toggle">Dashboard
<i class="far fa-chart-bar"></i>
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#" onclick="load()">Live Execution
<i class="fas fa-chart-line"></i>
</a>
</li>
<li>
<a href="#">Error Analysis
<i class="fas fa-bug"></i>
</a>
</li>
<li>
<a href="#">Rerun failed Tc
<i class="fas fa-step-forward"></i>
</a>
</li>
</ul>
</li>
<li>
</script>
{% block second %}
<div id="content1" class="col-xs1 centre-block text-center" style="width:100%">
</div>
<script type="text/javascript">
function load_jumbo() {
// document.getElementById("content").innerHTML='<object type="text/html" data="dashboard.html" ></object>';
$("#content1").load("jumbotron.html");
}
</script>
{% endblock %}
您可以在點擊標簽時使用它。
function load(file) {
document.getElementById("content").innerHTML='<object type="text/html" data="flex.html" ></object>';
}
如果使用jquery，請更改為$("#content").load("flex.html");
更新：
如果您嘗試在本地打開html文件，則需要為瀏覽器允許啟用CORS設置安全性。 在Chrome中禁用同一來源政策
您應該使用Web服務器打開文件。 我在免費主機中托管樣本。 有效
https://viethien.000webhostapp.com
function load(file) { document.getElementById("content").innerHTML='<object type="text/html" data="flex.html" ></object>'; }
<li class="active"> <a href="#homeSubmenu" data-toggle="collapse" area-expandable="false" class="dropdown-toggle">Dashboard <i class="far fa-chart-bar"></i> </a> <ul class="collapse list-unstyled" id="homeSubmenu"> <li> <a href="#" onclick="load()">Live Execution <i class="fas fa-chart-line"></i> </a> </li> <li> <a href="#">Error Analysis <i class="fas fa-bug"></i> </a> </li> <li> <a href="#">Rerun failed Tc <i class="fas fa-step-forward"></i> </a> </li> </ul> </li> <li> <div id="content" style="width:100%"></div>
您可以嘗試如下操作：
的index.html
<html>
<head>......</head>
<script>
function loadView(_view, _el) {
//check if already selected view
if ($(_el).hasClass("menuItemSelected")) {
return;
}
//set selected
$(".menuItemSelectable").removeClass("menuItemSelected");
$(_el).addClass("menuItemSelected");
loadSinglePage(_view);
}
</script>
<body>
.......
//your sidebar here
<a href="#dashboard" class="menuItemSelectable menuItemSelected" onclick="loadView('dashboard', this);"><i class="fa fa-dashboard" aria-hidden="true"></i><span class="nav-label">dashboard</span></a>
<a href="#liveexec" class="menuItemSelectable" onclick="loadView('liveexec', this);"><i class="fa fa-globe" aria-hidden="true"></i> <span class="nav-label">Live Execution></span></a>
</body>
</html>
然后，您將擁有一個JS文件，該文件將處理其余頁面。
Content.js
//初始化頁面
var execContent = undefined;
var scheduleContent = undefined;
function loadPages() {
// initialize your panels here
$("#divSearchPanel").load("Pages/Search/search.html", function (response, status, xhr) {
//progress
$("#divProgressLoader").load("Pages/Search/progress.html", function (response, status, xhr) {
loadProgress.init($("#divProgressLoader"));
});
searchPage.init($("#divSearchPanel"));
//dashboard
loadSinglePage("dashboard");
});
//call the loadpage function
loadPage("dashboard");
}
//load the page
function loadSinglePage(pageId) {
currentPage = pageId;
var contentDiv = $("#divPageContent");
contentDiv.html("");
if (pageId == "dashboard") {
contentDiv.load("Pages/Dashboard/dashboard.html", function (response, status, xhr) {
dashboardContent.init(contentDiv);
});
}
if (pageId == "liveexec") {
contentDiv.load("file/location/liveexec.html", function (response, status, xhr) {
execContent .init(contentDiv);
});
}
然后，您的頁面將看起來像這樣：
liveexec.html
<div style="">
<table style="width: 100%; height: 100%;" cellpadding="10" cellspacing="10">
<tr>
<td id="divgraph"></td>
</tr>
<tr>
<td id="divbuttons"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var execContent = execContent || {};
(function (pub) {
var _dom = null;
pub.init = function (dom) {
_dom = dom;
//load graphs
_dom.find("#divgraph").load("graph.html", function (response, status, xhr) {
riskComparisonGraph.init(_dom.find("#divgraph"));
});
}
})(liveexecContent || {});
</script>
如何在 index.html 中加載另一個 html 點擊 Javascript
[英]How to load another html inside index.html on click Javascript
如何在按鈕上單擊jQuery Mobile中加載另一個HTML文件
[英]how to load an another html file on a button click in jquery mobile
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.