javascript - 单击另一个 div 时 fadeIn/fadeOut 指定的 div？

Question

我正在创造一些东西，我想知道是否有人可以帮助我解决那里的一个问题。我不知道，我怎样才能制作一个始终隐藏指定的 div id 并在单击另一个 div(例如按钮)时显示它的 javascript。编辑:

假设我有 4 个按钮。

<div class="section" id="info" style="margin-top: 0px; ">
<h3><a href="#">Button</a></h3>
</div>

<div class="section" id="search" style="margin-top: 0px; ">
<h3><a href="#">Button2</a></h3>
</div>

<div class="section" id="player" style="margin-top: 0px; ">
<h3><a href="#">Button3</a></h3>
</div>

<div class="section" id="socials" style="margin-top: 0px; ">
<h3><a href="#">Button4</a></h3>
</div>

现在假设我在另一个 div 中有一个内容，我想在点击上面的第一个按钮时淡入。

    <div id="content-reveal">
    <p>something here</p>
    </div>

    <div id="content-reveal-2">
    <p>something here</p>
    </div>

    <div id="content-reveal-3">
    <p>something here</p>
    </div>

    <div id="content-reveal-4">
    <p>something here</p>
    </div>

好的...位置已经设​​置好，一切都在正确的位置。

所以...我怎样才能隐藏 <div id="content-reveal">并在有人点击我的按钮时显示它？

我有 4 个不同的按钮和 4 个不同的内容。因此，点击同一个按钮，内容再次消失，点击另一个按钮，旧内容消失，新内容出现。

简单的问题，对我来说是艰巨的任务......

如果有人能提供帮助，我真的很感激...

Answer 1

似乎其他答案并没有完全满足 OP 的要求。据我了解，OP 想要:

• 在页面加载时隐藏#content-reveal
• 按下按钮时淡入 #content-reveal
• 无需切换 #content-reveal(即，一旦显示，就应保持显示状态)

基于此，这是我的解决方案:

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

jsfiddle 在这里:http://jsfiddle.net/xK83w/

编辑:根据对 OP 问题的编辑，这里有一种方法可以完成您想要完成的任务:

$(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'
}

在此处更新了 jsfiddle:http://jsfiddle.net/xK83w/1/

但是，如果您的内容 block 包含大量 HTML，您可能需要考虑一种不同的方法，这样您就不会为 Javascript 增加大量 HTML 文本的负担。例如，您可以有四个不同的 div，然后像这样在它们之间进行选择:

<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 在这里:http://jsfiddle.net/xK83w/1/