Php ajax将内部链接加载到自定义Div中（不工作）
我创建了一个自定义jquery/ajax脚本，将与“navMenu”类的链接直接加载到ID为“main”的div中。我已经将该js与我的其他重要css、javascript和jquery文件一起附加到索引页面标题。对于所有链接页面，将使用这些文件。现在，我已经完成了设计和构建我的网站主加载页面。我创建的按钮链接将不会加载到我在ajax脚本中指定的div中。如何将所有页面上的所有链接加载到id为“main”的指定div中。我用菜单完成了这项工作。它可以完美地工作，但当我单击加载页面（home.php）内的按钮链接时，将不会在div中打开，并显示该页面不在服务器上。请帮忙 这里有一个网站的实时链接 以下是我的Ajax代码：Php ajax将内部链接加载到自定义Div中（不工作）,php,jquery,html,ajax,bootstrap-4,Php,Jquery,Html,Ajax,Bootstrap 4,我创建了一个自定义jquery/ajax脚本，将与“navMenu”类的链接直接加载到ID为“main”的div中。我已经将该js与我的其他重要css、javascript和jquery文件一起附加到索引页面标题。对于所有链接页面，将使用这些文件。现在，我已经完成了设计和构建我的网站主加载页面。我创建的按钮链接将不会加载到我在ajax脚本中指定的div中。如何将所有页面上的所有链接加载到id为“main”的指定div中。我用菜单完成了这项工作。它可以完美地工作，但当我单击加载页面（home.ph
$(document).ready(function () {
$('#main').load('pages/home.php');
$('.navMenu').click(function() {
var page = $(this).attr('href');
$('#main').load('pages/' + page + '.php');
return false;
});
` `});
<html>
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-108738796-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-108738796-1');
</script>
<title> ILLUMONOPOLY </title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="img/favicon1.png" type="image/x-icon">
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "14306e53-45e7-443c-a414-894b84cbac7d",
autoRegister: false,
notifyButton: {
enable: true /* Set to false to hide */
}
}]);
</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
font: 600 12px/1 'Open Sans', sans-serif;
color: #333;
background: #666666;
overflow-x: hidden;
}
.wrapper {
display: flex;
min-height: 100%;
}
.sidebar {
position: absolute;
width: 220px;
}
.content {
background: #666666;
transform: translate3d(0,0,0);
transition: transform .3s;
}
.content.isOpen {
transform: translate3d(220px,0,0);
}
.button {
cursor: pointer;
}
.button:before {
content: '\f00a';
font: 22px fontawesome;
}
/* Demo Navigation */
.title {
font-size: 16px;
text-align: center;
line-height: 28px;
text-transform: uppercase;
letter-spacing: 1px;
color: #eee;
border-bottom: 1px solid #222;
background: #2a2a2a;
}
</style>
<style>
nav2 {
height:28px!important;
align-items: center;
}
ul{ list-style-type: none;}
@font-face {
font-family: 'steelfish';
src: url('fonts/steelfish.ttf');
font-weight: 200;
}
@font-face {
font-family: 'Incognito';
src: url('fonts/Incognito.ttf');
font-weight: 100;
}
@font-face {
font-family: 'round';
src: url('fonts/Round.ttf');
font-weight: 100;
}
body{
font-family: steelfish !important;
color: white; !important;
overflow-y: scroll;
overflow-x: hidden;
font-size: 17px!Important;
}
h1{
font-family: Incognito !important;
color: white; !important;
}
h2{
font-family: round !important;
color: white; !important;
font-size: 85% !important;
}
.box { border-radius:8px;
border-style: solid;
border-color: #ffffff;
border-width: 2px;
background-color:rgba(0, 0, 0, 0.75);
background-attachment: fixed;
}
.contentX {
background-image: url("img/bgr.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#main {
width:100%;
height:93%;
overflow:auto !important;
overflow-x:hidden !important;
.scrollbox {
overflow-y: scroll !important;
overflow-x: hidden;
}
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(255,250,250,.9);
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(212,175,55,0.8);
}
</style>
<link rel="stylesheet" type="text/css" href="css/jquery.fullwidthAudioPlayer.css">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/lity.js"></script>
<script src="js/ajax.js"></script>
<script src="js/ajaxlinks.js"></script>
<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" data-api-key="ZjM1NDE3NDUtZmZhMS00ODA3LWE3ZGUtYzk0MWYwNzRmYjIxNjM2NDQ0NzA2MzQ3Njg0NDY0" id="snipcart"></script>
<link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" rel="stylesheet" type="text/css" />
<link href="css/lity.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/menu_cornermorph.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="//connect.soundcloud.com/sdk/sdk-3.1.2.js" type="text/javascript"></script>
<script src="js/jquery.fullwidthaudioplayer.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.button').on('click', function() {
$('.content').toggleClass('isOpen');
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<div class="title">
<center><img src="img/logo.png" class="img-fluid" height="150" width="150"><h1>Menu</h1></center>
</div>
<div class="link-list container-fluid">
<center>
<div class="row">
<button type="button" class="btn btn-secondary snipcart-user-profile col-6" style="background-color:#DAA520"><span class="snipcart-user-email">Login</span></button>
<button type="button" class="btn btn-secondary col-6" style="background-color:#DAA520"><span class="snipcart-user-logout">LogOut</span></button>
</div>
<ul id="navMenu"><h2>
<li><a href="home" class="navMenu"><span>Home</span></a></li>
<li><a href="artist" class="navMenu"><span>Talent</span></a></li>
<li><a href="services" class="navMenu"><span>Services</span></a></li>
<li><a href="music" class="navMenu"><span>Music</span></a></li>
<li><a href="shop" class="navMenu"><span>Beats</span></a></li>
<li><a href="media" class="navMenu"><span>Videos</span></a></li>
<li><a href="media" class="navMenu"><span>Portfolio</span></a></li>
<li><a href="contact" class="navMenu"><span>Contact Us</span></a></li>
</ul></h2>
<br>
FOLLOW US
</center>
</div>
</div>
<div class="content isOpen">
<div class="XcontentX">
<nav class="navbar navbar-dark nav2" style="background-color:#202020">
<a class="navbar-brand button" href="#"></a>
<button type="button" class="badge badge-warning snipcart-checkout" style="background-color:#DAA520"><img src="img/cart.png" height="25" width="25">:<span class="snipcart-total-price"></span></span></button>
</nav>
<div id="main"></div>
</div>
</div>
</div>
<nav class="navbar fixed-bottom" style="background-color:#202020">
<div id="fap"></div>
</nav>
<script>
$(document).ready(function(){
$('#fap').fullwidthAudioPlayer({wrapperColor: '#202020', fillColor: '#ffffff'});
});
</script>
</body>
</html>
window.dataLayer=window.dataLayer | |[]；
函数gtag（）{dataLayer.push（参数）；}
gtag（'js'，新日期（））；
gtag（“配置”、“UA-108738796-1”）；
发光聚合物
var OneSignal=window.OneSignal | |[]；
OneSignal.push（[“init”{
附件：“14306e53-45e7-443c-a414-894b84cbac7d”，
自动注册：错误，
通知按钮：{
enable:true/*设置为false以隐藏*/
}
}]);
@导入url（'https://fonts.googleapis.com/css?family=Open+Sans:400600’；
@导入url（'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*，*：之前，*：之后{
保证金：0；
填充：0；
框大小：边框框；
}
html，正文{
高度：100vh；
}
身体{
字体：600 12px/1“开放式Sans”，无衬线；
颜色：#333；
背景#666666；
溢出x：隐藏；
}
.包装纸{
显示器：flex；
最小高度：100%；
}
.侧边栏{
位置：绝对位置；
宽度：220px；
}
.内容{
背景#666666；
变换：translate3d（0,0,0）；
转变：转变；
}
.content.isOpen{
变换：translate3d（220px，0,0）；
}
.按钮{
光标：指针；
}
.按钮：之前{
内容：'\f00a'；
字体：22px；
}
/*演示导航*/
.头衔{
字体大小：16px；
文本对齐：居中；
线高：28px；
文本转换：大写；
字母间距：1px；
颜色：#eee；
边框底部：1px实心#222；
背景：#2a2a；
}
导航2{
高度：28px！重要；
对齐项目：居中；
}
ul{列表样式类型：无；}
@字体{
字体系列：“钢鱼”；
src:url（'font/steelfish.ttf'）；
字号：200；
}
@字体{
字体系列：“隐姓埋名”；
src:url（'font/Incognito.ttf'）；
字号：100；
}
@字体{
字体系列：“圆形”；
src:url（'font/Round.ttf'）；
字号：100；
}
身体{
字体系列：钢鱼！重要；
颜色：白色；！重要；
溢出y：滚动；
溢出x：隐藏；
字体大小：17px！重要；
}
h1{
字体家族：隐姓埋名！重要；
颜色：白色；！重要；
}
氢{
字体系列：圆形！重要；
颜色：白色；！重要；
字体大小：85%！重要；
}
.box{边界半径：8px；
边框样式：实心；
边框颜色：#ffffff；
边框宽度：2倍；
背景色：rgba（0,0,0,0.75）；
背景附件：固定；
}
.contentX{
背景图片：url（“img/bgr.jpg”）；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
#主{
宽度：100%；
身高：93%；
溢出：自动！重要；
溢出-x：隐藏！重要；
.滚动框{
溢出y：滚动！重要；
溢出x：隐藏；
}
}
：-webkit滚动条{
宽度：8px；
}
：-webkit滚动条轨迹{
-webkit盒阴影：插入0 0 2px rgba（255250250.9）；
边界半径：6px；
}
：-webkit滚动条拇指{
边界半径：10px；
背景色：rgba（212175,55,0.8）；
}
$（文档）.ready（函数（）{
$（'.button'）。在（'click'，function（）上{
$（'.content'）.toggleClass（'isOpen'）；
});
});
菜单
登录
注销
跟我们来
:
$（文档）.ready（函数（）{
$（'fap'）.fullwidthAudioPlayer（{wrapperColor:'202020'，fillColor:'ffffffff'）；
});
家
.混合服务{
背景：url（“img/parallaxstudio.jpg”）重复固定100%；
背景尺寸：封面；
}
将军{
背景：url（“img/parallaxmain1.jpg”）重复固定的80%！重要；
背景尺寸：封面；
}
.分配{
背景：url（“img/parallaxdistribution.jpg”）重复固定的80%！重要；
背景尺寸：封面；
}
.网页设计{
背景：url（“img/webservice.jpg”）重复固定80%！重要；
背景尺寸：封面；
}
.特色音乐{
背景：url（“img/featured.jpg”）重复固定80%！重要；
背景尺寸：封面；
}
IllumonPoly
欢迎来到
<html>
<head>
<title>Home</title>
<script src="js/better-simple-slideshow.min.js"></script>
<style>
.mixingservice {
background : url("img/parallaxstudio.jpg") repeat fixed 100%;
background-size: cover;
}
.general {
background : url("img/parallaxmain1.jpg") repeat fixed 80% !Important;
background-size: cover;
}
.distribution {
background : url("img/parallaxdistribution.jpg") repeat fixed 80% !Important;
background-size: cover;
}
.webdesign {
background : url("img/webservice.jpg") repeat fixed 80% !Important;
background-size: cover;
}
.featuredmusic {
background : url("img/featured.jpg") repeat fixed 80% !Important;
background-size: cover;
}
</style>
</head>
<body>
<!-- Promo Banners -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" height="400px">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="img-fluid " src="img/banner101.jpg" height="590px" alt="First slide">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/digigodbanner.jpg" height="590px" alt="DigiGod slide">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/banner2.jpg" height="590px" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<center>
<!-- Service Banners -->
<div class="general row">
<div class="col-lg-6 col-sm-12">
<img src="img/logo.png" class="img-fluid" height="420" width="420">
</div>
<div class="col-lg-6 col-sm-12">
<h1> <font color="white">ILLUMONOPOLY</font></h1><hr style="background-color:#ffffff">
<div class="box"><br> <font size="6vh">
Welcome to the official website of ILLUMONOPOLY. The Digital Media cartel. Providing independent businesses and musicians with marketable web media solutions to expand there brands for over 10 years.
Its Not what can we do for you. Its more of what cant we do for you. With our dedicated team and staff we can help you evolve your brand to the next level. Let Us Expand Your Brand, Your Sound, Your Visual Production, Your fanbase, Your Social media & web presence.<br><B>LET US HELP YOU EXPAND YOUR BRAND!!!!</b>
</font>
</div>
</div>
</div>
<div class="featuredmusic row">
<div class="col-lg-3 col-sm-6 box">
Featured album cover #2 <hr style="background-color:#ffffff">Bunch of fucckin bullshit that goes heremore bullshit and bullshit<br>Button
</div>
<div class="col-lg-3 col-sm-6 box">
Featured album cover #2 <hr style="background-color:#ffffff"><br>Bunch of fucckin bullshit that goes here<br>more bullshit and bullshit<br>Button
</div>
<div class="col-lg-3 col-sm-6 box">
Featured album cover #2 <hr style="background-color:#ffffff"><br>Bunch of fucckin bullshit that goes here<br>more bullshit and bullshit<br>Button
</div>
<div class="col-lg-3 col-sm-6 box">
Featured album cover #2 <hr style="background-color:#ffffff"><br>Bunch of fucckin bullshit that goes here<br>more bullshit and bullshit<br>Button
</div>
</div>
<div class="mixingservice row">
<div class="col-6">
</div>
<div class="col-6">
<img src="img/mixservice.png" class="img-fluid">
<br>
<H1>CLIENTS</H1><hr style="background-color:#ffffff">
<font size="6vh">Tory Lanes, Ron Browz, 2 Chainz, J-Hard 360, Dezzy Chamberland, Sig Music, ZaeTheGodd and more....<br>
</font><br>
<a href="services" class="navMenu"><button type="button" class="btn btn-danger btn-lg" style="background-color:"red" >Order Now</button></a>
<br><br>
</div>
</div>
<div class="general row">
<div class="container-fluid">
<center><br><br>
<h1><img src="img/logo.png" class="img-fluid" height="100" width="100"> expanding brands for the Last decade</h1>
<br><br>
</center>
</div>
</div>
<div class="distribution row">
<div class="col-6">
<img class="img-fluid" src="img/iphone.png" height="500" width="360">
</div>
<div class="col-6" style="padding-top: 30px; padding-bottom: 30px;">
<img src="img/distrotext2.png" class="img-fluid">
<br>
<img src="img/streams.png" class="img-fluid">
<br><br><a href="services" class="navMenu"><button type="button" class="btn btn-primary btn-lg" style="background-color:#000000">Sign Up</button></a>
<br><br>
</div>
</div>
<div class="webdesign row"><br><br><Br>
<div class="col-lg-6 col-sm-12">
<img src="img/mactop.png">
</div>
<div class="col-lg-6 col-sm-12"><br><Br><Br>
<div class="container-fluid box">
<font color="red" size="5vh"><h2>Web & Application Developement </h2><br></font>
<h2>Are You In Need of a Website? And or an Mobile Application? <br>
Our Team of developers can get your brand up and running and designed to your specifications in just a week.
Inquire via email for questions and quotes for custom designs and scripts, websites and applications.
<br>No JOB TOO BIG NO JOB TOO SMALL. LET US EXPAND YOUR BRAND!!!!!<br></h2><br><br>
<a href="services" class="navMenu"><button type="button" class="btn btn-primary btn-lg" style="background-color:#666666">Inquire Now</button></a>
</div>
</div>
</div>
<h1>Testing this here</h1>
<!-- Google Ads & Scripts -->
<br><br>
<br>
<br>
<br><br>
<div class="row"style="background-color:#202020">
<div class="col-4"></div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
<br><Br><br>
© ILLUMONOPOLY LLC. ALL RIGHTS RESERVED.
<br><br><Br>
</center>
</body>
</html>
$(document).ready(function () {
loadMainContent('home');
$('body').delegate('.yourInternalLinks', 'click', function (event) {
event.preventDefault();
loadMainContent($(this).attr('href'));
});
});
function loadMainContent(page) {
$('#main').load('pages/' + page + '.php');
}