我尝试使用 jQuery load
函数将我的内容加载到 index.html
的内容区域中。我成功了,但我的 JavaScript 不工作。我想在每次单击菜单元素时调用它。可能吗?
菜单:
<div id="nav" class="section group">
<div id="menu" class="col span_9_of_12">
<ul id="navmenu">
<li><a href="content/aboutme.html">Hakkımda</a></li>
<li><a href="content/portfolio.html">Portfolyo</a></li>
<li><a href="content/contact.html">İletişim</a></li>
<li><a href="content/photos.html">Fotoğraflar</a></li>
</ul>
</div>
加载函数:
$(document).ready(function() {
$('#content').load($('#navmenu li a:last').attr('href'));
var hash = window.location.hash.substr(1);
var href = $('#navmenu 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)
}
});
$('#navmenu li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('slow',loadContent);
$('#load').remove();
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('slow',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('slow');
}
return false;
});
});
最佳答案
更新:我原来的答案不再适用。自从我回答以来,OP 完全改变了页面实现和问题。
但正如我在下面的评论中所说,easytabs documentation规定选项卡元素和面板 div 必须全部位于容器 div 内。
<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'><a href="#hakkimda">Hakkımda</a></li>
<li class='tab'><a href="#portfolyo">Portfolyo</a></li>
<li class='tab'><a href="#fotograflar">Fotoğraflar</a></li>
<li class='tab'><a href="#iletisim">İletişim</a></li>
</ul>
<div id="hakkimda">
...
</div>
<div id="portfolyo">
...
</div>
<div id="iletisim">
...
</div>
<div id="fotograflar">
...
</div>
</div>
关于javascript - jquery 加载函数后 JS 崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20832786/