如何使用 jquery 显示隐藏 div [关闭]答案

【问题标题】：How to show hide div with jquery [closed]如何使用 jquery 显示隐藏 div [关闭]
【发布时间】：2014-01-04 02:40:23
【问题描述】：

我有这个动态生成的标记。但是，当生成两个 div 时，我想要一个在两者之间切换的按钮。这是我的代码。

<div class="threeSixtyContainer">

     <div class="toggle"><embed height="350" flashvars="site=lexmoto" pluginspage="http://www.adobe.com/go/getflashplayer" src="models/ZS125-50/360/ZS125-50_Blue.swf" type="application/x-shockwave-flash" width="500"></div>
     <div class="toggle"><embed height="350" flashvars="site=lexmoto" pluginspage="http://www.adobe.com/go/getflashplayer" src="models/ZS125-50/360/ZS125-50_Black.swf" type="application/x-shockwave-flash" width="500"></div>

</div>

如何添加一个可以在两个 div 之间切换的切换按钮。所以一个被隐藏按下按钮，它被更改为显示块，另一个被隐藏。

【问题讨论】：

toggle visibility of div jquery javascript的可能重复

标签： javascript jquery html

【解决方案1】：

当您有一个 ID 为 #button 的按钮时，您可以使用以下代码：

$('#button').click(function(){
    $('.toggle').toggle();
});

如果你确定一个是可见的，一个是隐藏的作为初始状态。这将完美地工作

【讨论】：

【解决方案2】：

我更喜欢在显示当前后隐藏所有和。它对添加未来元素很友好，并且是一种简单/直接的方式来表示“只保留此按钮可见！”。

CSS：

.toggle {
    display: none;
}

Javascript：

$(document).ready(function(){
    $('.toggle').first().show();

    $([button]).click(function(){
        $('.toggle').hide();
        $(this).show();
    });
});

【讨论】：

【解决方案3】：

$(document).ready(function() {
  $('.toggle:first-child').hide();
  $('#toggle-button').click(function() {
    $('.toggle').toggle();
  });
});

如果您的按钮具有toggle-button 作为id。

【讨论】：

【解决方案4】：

<div class="threeSixtyContainer">

 <div class="toggle"><embed height="350" flashvars="site=lexmoto" pluginspage="http://www.adobe.com/go/getflashplayer" src="models/ZS125-50/360/ZS125-50_Blue.swf" type="application/x-shockwave-flash" width="500"></div>
 <div style="display:none;" class="toggle"><embed height="350" flashvars="site=lexmoto" pluginspage="http://www.adobe.com/go/getflashplayer" src="models/ZS125-50/360/ZS125-50_Black.swf" type="application/x-shockwave-flash" width="500"></div>

javascript：

$('#togglebutton').click(function(){
    $('.toggle').toggle();
});

【讨论】：

【解决方案5】：

这里有点从臀部射击。

<div class="threeSixtyContainer">
     <div class="toggle"><embed height="350" flashvars="site=lexmoto" pluginspage="http://www.adobe.com/go/getflashplayer" src="models/ZS125-50/360/ZS125-50_Blue.swf" type="application/x-shockwave-flash" width="500"></div>
     <div class="toggle"><embed height="350" flashvars="site=lexmoto" pluginspage="http://www.adobe.com/go/getflashplayer" src="models/ZS125-50/360/ZS125-50_Black.swf" type="application/x-shockwave-flash" width="500"></div>
     <a href="javascript:;" id="button">Toggle</a>
</div>

还有你的 JS：

$(document).ready(function() {
    $('#button').on('click',function(){
        objToggle = $('.toggle');
        if(objToggle.eq(0).is(':visible')){
            objToggle.eq(0).hide();
            objToggle.eq(1).show();
        } else {
            objToggle.eq(1).hide();
            objToggle.eq(0).show();
        }
    });
});

【讨论】：