Question

我有这个动态生成的标记。但是当生成两个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之间切换。所以一个是隐藏按下按钮，它会变为显示块，另一个显示隐藏。

Answer 1

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

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

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

Answer 2

我更喜欢隐藏所有＆amp;在显示当前。它对添加未来元素很友好，是一种简单/直接的方式来说“只留下这个按钮！”。

CSS：

.toggle {
    display: none;
}

使用Javascript：

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

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

Answer 3

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

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

Answer 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 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();
        }
    });
});

Answer 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 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();
});

如何用jquery显示hide div

5 个答案: