这个 jQuery 看起来应该可以工作

发布于 2025-01-07 04:04:25 字数 3180 浏览 0 评论 0 原文

我已经在这段 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>

I've trawled for hours over this piece of jQuery and I still can't get it to work.

When I click one toggle, the rest open.

I really need some help on this as it's for an important project.

I'm not too good with jQuery and I've neatened it up as much as I can, but I'm really stuck.

Here's the code:

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 );
        }
    );   

});

and the (relevant) 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

苹果你个爱泡泡 2025-01-14 04:04:25

您在菜单元素淡出后立即使用 fadeIn

使所有这些行:

contact.css("background-color","transparent").fadeIn( 500 );

看起来像这样:

contacttoggle.css("background-color","transparent").fadeIn( 500 );

您在 contacttoggle.click 函数中正确执行了此操作。

您还可以使用 $(this) 而不是预定义变量。 $(this) 引用该函数所作用的 jQuery 对象。

You're using fadeIn on the menu elements right after you fade them out.

Make all of these lines:

contact.css("background-color","transparent").fadeIn( 500 );

look like this:

contacttoggle.css("background-color","transparent").fadeIn( 500 );

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文