Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, tudo bem??
Estou engatinhando na montagem de uma tela aqui, vou tentar explicar:
Preciso q ao clicar sobre um evento (Rio de Janeiro), seja exibido os detalhes do mesmo e ao tirar o mouse de cima, os detalhes somem. Respectivamente ao clicar sobre o evento São Paulo, carregue o evento correspondente.
Rio de Janeiro (RJ)
Dia 02/08
Mostrar 02/08 - Rio de Janeiro - Hotel X, às 14 horas.
São Paulo (SP)
Dia 04/08
Eis meu html:
<div id="evento">
<span class="cidade">Rio de Janeiro (RJ)</span>
<span class="data">
02/08</span>
<span class="cidade">São Paulo (SP)</span>
<span class="data">
04/08 </span>
</div>CSS
#evento {
padding-top:1%;
}
.cidade {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
font-weight: bold;
height:27px;
color: #FFFFFF;
text-decoration: none;
padding-top: 6px;
float: left;
}
.data {
font-family: "Courier New", Courier, monospace;
font-size: 14px;
height:20px;
color: #000;
text-decoration: none;
padding-top: 0px;
padding-bottom: 10px;
float: left;
}Vcs poderia, por favor, me ajudar??
Desde já obrigada!!
Super SUPER obrigada!!!!!!!!!
Posso te encomodar mais um pouquinho??
Pra ficar perfeito, eu gostaria q o "ID_1" sumisse e o spam "opc_1" ficasse em cima dele.
Você poderia me ajudar?? rsrs
Obrigadíssima mais uma vez!!
Oi, conseguir fazer fechar!!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var show = "#opc_1";
$(document).ready(function(){
$("div a").click(function(){
$(show).hide();
show = $(this).attr('id');
show = "#opc"+show;
$(show).show();
});
$("#opc").click(function(){
$(show).hide();
show = $(this).attr('id');
show = "#div a"+show;
$(show).show();
});
});
</script>
<div id="cidade"><a href="#" id="_1">São Paulo (SP)<br /> <span class="data"> 20/06</span></a></div>
<span id="opc_1" class="hide"><a href="#" id="opc_1">bla bla bla bla bla bla bla</a></span>Agora só preciso ele fique na mesma posição!!
<!-- jQuery.com -->
/Deixa as SPANs escondidas!/
span[class=hide]{display:none;}