这件事按预期工作。 Here是一个演示。
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
<script>
$(window).load(function() {
$('#about, #subscribe, #contact').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
var $content = $('#' + id + ':not(:visible)');
if ($('.current').length === 0) {
showContent($content)
}
else {
$('.current').fadeOut(600, function() {
showContent($content)
});
}
});
function showContent(content) {
content.fadeIn(600);
$('.current').removeClass('current');
content.addClass('current');
}
});
</script>
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br/>
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<div id="content">
<div class="current" id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
</div>
我想用图片替换文字(ABOUT,SUBSCRIBE和CONTACT)。所以我尝试了 with this ,但它不起作用..你知道为什么吗? :)
答案 0 :(得分:0)
尝试使用:
$('#about, #subscribe, #contact').hide();
$('.home').click(function () {
var id = this.id.replace('show_', ''); // this line has been changed
var $content = $('#' + id + ':not(:visible)');
if ($('.current').length === 0) {
showContent($content)
} else {
$('.current').fadeOut(600, function () {
showContent($content)
});
}
});
function showContent(content) {
content.fadeIn(600);
$('.current').removeClass('current');
content.addClass('current');
}
当您点击链接时,会点击链接id
,然后移除show_
并显示带有id
的div。这是一个例子:
用户点击顶部链接。
id
为show_about
。 javascript会移除show_
离开about
,然后选择$('#about:not(:visible)');
并将其淡入。
答案 1 :(得分:0)
我在这里看到的第一个错误是在控制台中:
获取http://gioiellidisapone.it/http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.map 404(未找到)
<script type="text/rocketscript" data-rocketsrc="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" data-rocketoptimized="true"></script>
<script type="text/rocketscript" data-rocketsrc="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" data-rocketoptimized="true"></script>
你缺少http:在上面一行
答案 2 :(得分:0)
<script>
$(window).load(function() {
$('#about, #subscribe, #contact').hide();
$('.home').click(function() {
//var id = $(this).html().toLowerCase();
//var $content = $('#' + id + ':not(:visible)');
var $content = $('#' + $(this).attr('title').toLowerCase() + ':not(:visible)'); // changed Here..
if ($('.current').length === 0) {
showContent($content)
}
else {
$('.current').fadeOut(600, function() {
showContent($content)
});
}
});
function showContent(content) {
content.fadeIn(600);
$('.current').removeClass('current');
content.addClass('current');
}
});
</script>
您将图片视为内容..
您必须改为获取Title属性。