[英]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.