这个 jQuery 看起来应该可以工作
我已经在这段 jQuery 上搜索了几个小时,但仍然无法让它工作。
当我单击一个开关时,其余开关都会打开。
我真的需要一些帮助,因为这是一个重要的项目。
我不太擅长 jQuery,我已经尽可能地对其进行了整理,但我真的陷入了困境。
这是代码:
jQuery(function( $ )
{
var about = $( "#about" ),
contact = $( "#contact" ),
download = $( "#download" ),
abouttoggle = $( "#abouttoggle"),
contacttoggle = $( "#contacttoggle"),
downloadtoggle = $( "#downloadtoggle");
abouttoggle.click(
function( event )
{
event.preventDefault();
if ( about.is( ":visible" ) )
{
about.fadeOut( 500 );
abouttoggle.css("background-color","transparent").fadeIn( 500 );
}
else
{
about.fadeIn( 500 );
abouttoggle.css("background-color","#E0E0E0").fadeIn( 500 );
}
contact.fadeOut( 500 );
contact.css("background-color","transparent").fadeIn( 500 );
download.fadeOut( 500 );
download.css("background-color","transparent").fadeIn( 500 );
}
);
contacttoggle.click(
function( event )
{
event.preventDefault();
if ( contact.is( ":visible" ) )
{
contact.fadeOut( 500 );
contacttoggle.css("background-color","transparent").fadeIn( 500 );
}
else
{
contact.fadeIn( 500 );
contacttoggle.css("background-color","#E0E0E0").fadeIn( 500 );
}
about.fadeOut( 500 );
abouttoggle.css("background-color","transparent").fadeIn( 500 );
download.fadeOut( 500 );
download.css("background-color","transparent").fadeIn( 500 );
}
);
downloadtoggle.click(
function( event )
{
event.preventDefault();
if ( download.is( ":visible" ) )
{
download.fadeOut( 500 );
downloadtoggle.css("background-color","transparent").fadeIn( 500 );
}
else
{
download.fadeIn( 500 );
downloadtoggle.css("background-color","#E0E0E0").fadeIn( 500 );
}
contact.fadeOut( 500 );
contact.css("background-color","transparent").fadeIn( 500 );
about.fadeOut( 500 );
about.css("background-color","transparent").fadeIn( 500 );
}
);
});
和(相关)html:
<div align="center" class="info">
<a id="abouttoggle" href="#" class="aboutbutton">about</a> | <a id="contacttoggle" href="#" class="contactbutton">contact</a> | <a id="downloadtoggle" href="#" class="downloadbutton">downloads</a>
</div>
<div align="center" class="about" id="about">
about stuff
</div>
<div align="center" class="contact" id="contact">
contact stuff
</div>
<div align="center" class="download" id="download">
download stuff
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您在菜单元素淡出后立即使用
fadeIn
。使所有这些行:
看起来像这样:
您在
contacttoggle.click
函数中正确执行了此操作。您还可以使用
$(this)
而不是预定义变量。$(this)
引用该函数所作用的 jQuery 对象。You're using
fadeIn
on the menu elements right after you fade them out.Make all of these lines:
look like this:
You're doing it correctly in the
contacttoggle.click
function.You could also be using
$(this)
instead of pre-defining variables.$(this)
references the jQuery object that the function is acting on.