It seems like the other answers are not quite getting what the OP is looking for. From what I understand, the OP wants to:

• Hide #content-reveal on page load
• Fade-in #content-reveal when the button is pressed
• No requirement to toggle #content-reveal (i.e., once it s displayed, it should stay displayed)

基于这一点,我的解决办法是:

$(document).ready( function() {
    $( #content-reveal ).hide();
    $( #show-button ).click( function() {
        $( #content-reveal ).fadeIn( 500 );
    } );
} );​

jsfiddle here: http://jsfiddle.net/xK83w/

EDIT:根据对欧佩斯问题的its,这里采取的做法是,你将努力做到:

$(document).ready( function() {
    $( #content-reveal ).hide();
    $( #info ).click( function() {
        $( #content-reveal ).fadeOut( 500, function() {
            $( #content-reveal ).html(  <b>info HTML</b>  );
            $( #content-reveal ).fadeIn( 500 );
        } );
    } );
    $( #search ).click( function() {
        $( #content-reveal ).fadeOut( 500, function() {
            $( #content-reveal ).html(  <b>search HTML</b>  );
            $( #content-reveal ).fadeIn( 500 );
        } );
    } );
    // repeat for  player  and  socials 
}

http://jsfiddle.net/xK83w/1/“rel=“nofollow” http://jsfiddle.net/xK83w/1/。

However, if your content blocks contain a lot of HTML, you may want to consider a different approach so you re not burdening your Javascript with a lot of HTML text. For example, you could have four different divs, and select between them like so:

<div id="content">

    <div id="content-reveal-info">
    <ul id="newsticker_1" class="newsticker">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</li>
        <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip...</li>
        <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum...</li>
        <li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia...</li>
        <li>Bubble bubble ipsum dolor sit amet, consectetur adipisicing elit...</li>
    </ul>
</div>

<div id="content-reveal-search">
    <b>search HTML</b>
</div>

<div id="content-reveal-player">
    <b>player HTML</b>
</div>

<div id="content-reveal-socials">
    <b>socials HTML</b>
</div>

从而形成实际转换的功能:

var activeElement;

function activateElement( eltSuffix ) {
    if( activeElement ) {
        activeElement.fadeOut( 500, function() {
            activeElement = $( #content-reveal- +eltSuffix);
            activeElement.fadeIn( 500 );
        } );
    } else {
        activeElement = $( #content-reveal- +eltSuffix);
        activeElement.fadeIn( 500 );
    }
}

接着最后看看你的活动处理者:

$(document).ready( function() {
    $( #content div ).hide();
    $( #info ).click( function() {
        activateElement( info );
    } );
    $( #search ).click( function() {
        activateElement( search );
    } );
    $( #player ).click( function() {
        activateElement( player );
    } );
    $( #socials ).click( function() {
        activateElement( socials );
    } );
} );​

jsfiddle here: http://jsfiddle.net/xK83w/1/

$( #info a ).on( click , function(evt) {
   evt.preventDefault();
   $( #newsticker_1 ).toggle();
});

服饰

$(document).ready(function(){
  $("#content-reveal").hide();
  $("#info").click(function(){
     $("#content-reveal").show();
   });

});

If you want to show/hide after every click then in place of $("#content-reveal").show(); write $("#content-reveal").toggle();

不要把你带往网页顶部,总是这样做。

<a href=“jaavascript:ave(0);”>Button</a>

这是JQuery,不是简单的javascript,但可以帮助你,请见。

http://jsfiddle.net/Talty09/mv7qx/2/>rel=“nofollow> http://jsfiddle.net/Talty09/mv7qx/2/。