所以.. 我一直在尝试动态加载内容，但是当我单击菜单加载器时仅显示。看来我无法弄清楚这一点，你能看一下代码并告诉我我是否错过了什么或做错了什么吗？
这是我的html
<body>
<div id="wrapper">
<div id="top">
<div id="logo">
<img src="images/logo.png"/>
</div>
<div id='cssmenu'>
<ul id="nav">
<li class='has-sub'><a href="storitve.html">Storitve</a>
<ul>
<li><a href="grafično-oblikovanje.html">Grafično oblikovanje</a></li>
<li><a href="spletno-oblikovanje.html">Spletno oblikovanje</a></li>
<li><a href="industrijsko-oblikovanje.html">Industrijsko oblikovanje</a></li>
</ul>
</li>
<li><a href="reference.html">Reference</a></li>
<li><a href="cenik.html">Cenik</a></li>
<li class='last'><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<p>©Copyright 2015</p>
</div>
</div>
</body>
</html>
..和js
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
和CSS
body { width:100%;
height:100%;
margin:0px;
padding:0px;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
text-align:center;
background:#BFBFBF;
padding-bottom:60px;
}
#logo { float:left;
position: fixed;
margin-top: 20px;
margin-left: 20px;
margin-bottom:20px;
z-index: 2000;
}
#top { position:relative;
top: 0px;
left:0px;
width:945px;
height: 160px;
background-color: white;
z-index:auto;
opacity: ;
}
#cssmenu { float:right;
position:fixed;
margin-top:123px;
margin-left:554px;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 11px;
line-height: 15px;
text-transform: uppercase;
text-align: left;
z-index:3;
}
#cssmenu > ul { width: auto;
list-style-type: none;
padding: 0;
margin: 0;
}
#centeredmenu ul ul {
z-index: 1 !Important;
}
#wrapper { width: 945px;
margin:0px auto;
background: #BBB;
position:relative;
border: ;
}
#content { width:880px;
background-color:white;
border: px solid white;
margin: 10px auto;
padding: 0 30px;
}
#footer { position:fixed;
bottom:0;
left:0;
width:100%;
height:40px; /* Height of the footer */
background:white;
}
#load {
display: none;
position: absolute;
right:460px;
top: 380px;
background: url(../images/ajax-loader.gif);
width: 43px;
height: 11px;
text-indent: -9999em;
}
最佳答案
您正在从 DOM 中删除加载程序:
$('#load').remove();
然后，当它不存在时，您尝试将其淡入:
$('#load').fadeIn('normal');
将 .remove() 替换为 .hide() 调用以隐藏它，但不将其从 DOM 中删除。
关于javascript - 使用 jquery 动态加载内容不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28046690/