Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, estou desenvolvendo um site e nele tenho dois conteúdos e preciso que mostre apenas um por vez, quando eu clicar no botão 1 ele deve exibir o conteúdo 1 e a mesma coisa com o conteúdo 2, então fiz assim:
CSS:
.content_slide_02 {
display: none;
}
HTML:
<!-- button 01 -->
<a href=javascript: void(0);" id="select_slide_01">Conteudo_01</a>
<!-- button 02 -->
<a href=javascript: void(0);" id="select_slide_02">Conteudo_02</a>
<div class="content_slide_01">conteudo 01</div>
<div class="content_slide_02">conteudo 02</div>
jQuery:
<script>
jQuery(document).ready(function(){
jQuery('#select_slide_01').click(function() {
jQuery('.content_slide_01').slideDown('slow');
jQuery('.content_slide_02').slideUp('fast');
});
jQuery('#select_slide_02').click(function() {
jQuery('.content_slide_02').slideDown('slow');
jQuery('.content_slide_01').slideUp('fast');
});
});
</script>
Mas eu precisei trocar os botões por *<select>* e *<option>*, só alterei o html:
Antes:
<!-- button 01 -->
<a href=javascript: void(0);" id="select_slide_01">Conteudo_01</a>
<!-- button 02 -->
<a href=javascript: void(0);" id="select_slide_02">Conteudo_02</a>
<div class="content_slide_01">conteudo 01</div>
<div class="content_slide_02">conteudo 02</div>
Depois:
<form id="form_search_property_category" name="form_search_property_category" method="post" action="">
<select name="category" id="category" class="input_style select_size_02">
<option id="select_slide_01" value="Apartamento">Apartamento</option>
<option id="select_slide_02" value="Casa">Casa</option>
</select>
</form>
<div class="content_slide_01">conteudo 01</div>
<div class="content_slide_02">conteudo 02</div>
Deu certo, mas apenas no FF, já nos demais ele não tinha ação.
Obs: No projeto eu tenho sete <option>, mas eu coloquei apenas dois, por que resolvendo dois eu já consigo o resto.
Desde á, muito obrigado!
Carregando comentários...