4

我正在创造一些东西，我想知道是否有人可以帮助我解决一个问题。我不知道，如何制作一个始终隐藏指定 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 个不同的内容。所以点击同一个按钮，内容再次消失，点击另一个按钮，旧内容消失，新内容出现。

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

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

4

6 回答 6

4

似乎其他答案并没有完全得到 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/

但是，如果您的内容块包含大量 HTML，您可能需要考虑一种不同的方法，这样您的 Javascript 就不会有大量 HTML 文本的负担。例如，您可以有四个不同div的 s，并在它们之间进行选择，如下所示：

<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/

于 2012-05-14T20:10:08.307 回答
3 
$('#info a').on('click', function(evt) {
   evt.preventDefault();
   $('#newsticker_1').toggle();
});
于 2012-05-14T20:00:40.617 回答
2

使用 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>

于 2012-05-14T20:02:43.347 回答
1

这是 JQuery，不是普通的 javascript，但它可以帮助你，你有例子http://api.jquery.com/toggle/

于 2012-05-14T20:00:21.293 回答
1 
<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>

当然还有其他更简单和更小的方法可以做到这一点，但是看到你给出的这将是我的快速演绎，不会影响你已经拥有的东西的整体概念

于 2012-05-14T20:03:55.860 回答
1

这是我制作的一个快速 JSFiddle。建立在此处已经提供的概念之上。

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

编辑：使用 .toggle()

于 2012-05-14T20:18:44.020 回答