fadeIn / fadeOut指定div點擊另一個div？

Question

我正在創造一些東西，我想知道，如果有人可以幫我解決一個問題。 我沒有想法，我怎樣才能制作一個始終隱藏指定div id的javascript，並在點擊另一個div（例如按鈕）時顯示它。 編輯：

所以我想說我有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 on page load
• 淡入#content-reveal content- #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/

但是，如果您的內容塊包含大量HTML，您可能需要考慮不同的方法，這樣您就不會為大量HTML文本帶來Javascript負擔。 例如，您可以有四個不同的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/

Answer 2

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

Answer 3

使用jQuery

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

});

如果你想在每次點擊后顯示/隱藏，那么代替$("#content-reveal").show(); 寫$("#content-reveal").toggle();

對於鏈接不要帶你到頁面的頂部總是這樣做

<a href="jaavascript:void(0);">Button</a>

Answer 4

這是JQuery，不是簡單的javascript，但它可能對你有幫助，你有例子http://api.jquery.com/toggle/

Answer 5

<div class="section" id="info" style="margin-top: 0px; ">
<h3><a href="#" id="showDiv" rel="hidden">Button</a></h3>
</div>
<div id="content-reveal">
    <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>

<script type="text/javascript">
$('#showDiv').click(function(e){
   e.preventDefault();
   if($(this).attr('rel') == 'hidden'){
      $('#content-reveal').show();
      $(this).attr('rel', 'shown');
   }
   else
   {
      $('#content-reveal').hide();
      $(this).attr('rel', 'hidden');
   }
}
</script>

當然還有其他半更簡單和更小的方法來做到這一點，但看到你給的這個將是我的快速演繹，不會影響你已經擁有的整體概念

Answer 6

這是我制作的快速JSFiddle。 建立在這里已經提供的概念之上。

http://jsfiddle.net/Talty09/mv7qx/2/

編輯：使用.toggle（）