Как показать скрыть div с jquery

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> 

Как я могу добавить тумблер, который будет переключаться между двумя разделителями. поэтому один из них скрыт, нажав кнопку, и он будет изменен на блок отображения, а другой будет скрыт.

Answer 1

, когда у вас есть кнопка с идентификатором #button, вы можете использовать следующий код:

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

, если вы убедитесь, что один виден, и один спрятан в исходное состояние. это будет отлично работать

Answer 2

Я предпочитаю скрыть все & после show current. Это удобно для добавления будущих элементов и является простым/простым способом сказать «оставьте только эту кнопку видимой!».

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

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