我创建了单页应用程序。我使用了 ColdFusion 2016、JQuery、JavaScript、HTML5 和 Bootstrap 3。我试图保持简单，到目前为止一切都运行良好。我想要更改的一件事是 .html 文件在我的应用程序中加载的方式。这是当前的代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">
<link rel="stylesheet" href="CSS/Home.css">
<cfif SysAdmin EQ 1><link rel="stylesheet" href="CSS/Admin.css"></cfif>
<!---*** Start: JQuery 3.3.1 version. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.7/bootstrap-confirmation.min.js"></script>
<!---*** End: Bootstrap 3.3.7 version files. ***--->
</head>
<body>
<div id="main-container" class="container">
<nav class="navbar navbar-custom">
<div class="container-fluid">
<p class="navbar-text"><span class="glyphicon glyphicon-home"></span> <b>Welcome to Example Application!</b></p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul id="main-menu" class="dropdown-menu">
<li class="active"><a href="/user-page" data-container="user-container">User</a></li>
<cfif SysAdmin EQ 1><li><a href="/admin-page" data-container="admin-container">Administrator</a></li></cfif>
</ul>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-user"></span>JohnM</a>
</li>
<li>
<a href="#" data-toggle="confirmation" data-popout="true" role="button" id="log_out">
<span class="glyphicon glyphicon-log-in"></span> Logout</a>
</li>
</ul>
</div>
</nav>
<div id="user-container"><cfinclude template="User.html"></div>
<cfif SysAdmin EQ 1><div id="admin-container"><cfinclude template="Admin.html"></div></cfif>
</div>
<cfinclude template="Modal.html">
<script language="javascript" src="JS/Home.js"></script>
<cfif SysAdmin EQ 1><script language="javascript" src="Admin.js"></script></cfif>
</body>
</html>
下面是控制首先在屏幕上显示哪个容器以及用户如何切换和显示不同容器的函数:
$("#main-menu li a").on('click', mainMenu);
function mainMenu(e) {
e.preventDefault();
var itemID = $(e.target).attr('data-container');
$(this).parent().addClass('active').siblings().removeClass('active');
$('#main-container > div[id="' + itemID + '"]').show();
$('#main-container > div:not([id="' + itemID + '"])').hide();
}
在页面加载时触发此代码:
$(document).ready(function(){
// Trigger on click function on the main menu element.
$('#main-menu').find('a[data-container="user-container"]').trigger('click');
});
我想知道是否有更好的方法在 JQuery 中加载 .html 容器？我读过一篇文章，其中展示了小型框架 Sammy.js。我不确定这对我来说是否有必要使用，或者还有其他方法可以实现这一目标。如果有人能提供一些例子那就太好了。谢谢。
最佳答案
$(document).ready(_ => {
const $content = $('#content');
$.get('content.html')
.done(data => $content.html(data))
.fail(($xhr, errorMsg) => $content.text(`Error: ${errorMsg}`));
})
关于javascript - 如何使用JQuery在主页加载.html文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52594276/