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
按下按钮时淡入#content-reveal
无需切换#content-reveal（即，一旦显示，就应该保持显示）

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

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

jsfiddle here：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，您可能需要考虑不同的方法，这样您就不会为自己的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 here：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（）

fadeIn / fadeOut指定div点击另一个div？

6 个答案: