Question

我在这篇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>

Answer 1

您在淡出它们后立即在菜单元素上使用fadeIn。

制作所有这些行：

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

看起来像这样：

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

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

您也可以使用$(this)而不是预先定义变量。 $(this)引用函数正在执行的jQuery对象。

这个jQuery似乎应该可行

1 个答案: