我在我的主页上加载了外部内容。一切都很好。但我有一个问题。如果我点击当前链接,内容也会加载。但我希望只有在另一个内容的情况下才会加载内容。
$(document).ready(function() {
$(".navigation li").click(function() {
var quelle = $(this).attr('id') + ".php";
// content
$(".content").fadeOut(function() {
$(this).load("content/" + quelle).fadeIn('normal');
})
// advertisement
$(".advertisement").fadeOut(function() {
$(this).load("advertisement/" + quelle).fadeIn('normal');
})
// header
$(".contentHeader").fadeOut(function() {
$(this).load("header/" + quelle).fadeIn('normal');
})
});
});
这是HTML。是的...我忘记了点击事件处理程序;)
<div class="container">
<div class="navigation">
<ul>
<li id="1">
<div class="menuImage"></div>
<div class="menuText"><p>1</p></div>
</li>
<li id="2">
<div class="menuImage"></div>
<div class="menuText"><p>2</p></div>
</li>
<li id="3">
<div class="menuImage"></div>
<div class="menuText"><p>3</p></div>
</li>
<li id="4">
<div class="menuImage"></div>
<div class="menuText"><p>4</p></div>
</li>
<li id="5">
<div class="menuImage"></div>
<div class="menuText"><p>5</p></div>
</li>
<li id="6">
<div class="menuImage"></div>
<div class="menuText"><p>6</p></div>
</li>
</ul>
</div>
<div class="mainContainer">
<div class="containerHeader">
<div class="contentHeader">
<p>old header</p>
</div>
</div>
<div class="contentContainer">
<div class="content">
<p>old content</p>
</div>
<div class="advertisement">
<p>old advertisement</p>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
您可以像这样保存当前ID:
$(document).ready(function() {
var current;
$(".navigation li").click(function() {
var quelle = $(this).attr('id') + ".php";
if(current === quelle) {
return;
}
current = quelle;
// content
$(".content").fadeOut(function() {
$(this).load("content/" + quelle).fadeIn('normal');
})
// advertisement
$(".advertisement").fadeOut(function() {
$(this).load("advertisement/" + quelle).fadeIn('normal');
})
// header
$(".contentHeader").fadeOut(function() {
$(this).load("header/" + quelle).fadeIn('normal');
})
});
});