Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Lucas Röhers

Transição suave

Por , em Desenvolvimento frontend

Recommended Posts

Lucas Röhers    0

Lucas Röhers
Postado

Caros,

Tenho o seguinte código:

 

<!DOCTYPE html>
<html lang="pt-BR" prefix="og: http://ogp.me/ns#">
<head>

	<title>Tabela</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <link rel="stylesheet" href="./css/bootstrap.css" type="text/css" media="all" />
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
	<link rel="stylesheet" href="./css/bootstrap-responsive.css" type="text/css" media="all" />
    <link rel="stylesheet" href="./css/responsive.css" type="text/css" media="all" />
    <link rel="stylesheet" href="./css/HWIPTGDS2.css" type="text/css" media="all" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>

<body class="sub-page">
<!--end:theme-option-->
<div class="flx-wrapper">
		<div class="wrapper clearfix">
        <br/><br/>
			<section class="table-3col clearfix">
                    <div class="pricing-column pricing-column-first">
						<div class="pricing-header">
							<div class="pricing-title">Basic</div>
							<div id="selecionado" class="price"><sup>R$</sup><span>9,99</span>/mês</div>
						</div><!--end:pricing-header -->
						<ul class="features">
							<li><p class="p-icone-tabela">
                            <select class="select-ciclos" name="select" onchange="document.getElementById('selecionado').innerHTML = '' + this.value;">   
    <option value="<sup>R$</sup><span>9,99</span>/mês" selected="selected">Mensal</option>
    <option value="<sup>R$</sup><span>28,77</span>">Trimestral -4%</option>  
    <option value="<sup>R$</sup><span>54,14</span>">Semestral -8%</option>
    <option value="<sup>R$</sup><span>99,99</span>/ano">Anual -16%</option>  
                            </select></p></li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-hdd icone-tabela"></i>60GB de espaço</p></li>
							<li><p class="p-icone-tabela"><i class="icon-exchange icone-tabela"></i>Tráfego ilimitado</p></li>
                            <li>
                              <p class="p-icone-tabela "><i class="icon-envelope-alt icone-tabela"></i>E-mails ilimitados</p></li>
							<li><p class="p-icone-tabela"><i class="icon-globe icone-tabela"></i>Hospede até 3 domínios</p></li>
						</ul><!--end:features-->						
						<div class="pricing-footer">
							<a class="flx-blue-button flx-button" href="#">Contrate agora</a>
						</div><!--end:pricing-footer-->			
					</div><!--end:pricing-column-->
					<div class="pricing-column pricing-special">
						<div class="pricing-header">
							<div class="pricing-title">Standard</div>
							<div id="selecionado1" class="price"><sup>R$</sup><span>16,99</span>/mês</div>
						</div><!--end:pricing-header -->
						<ul class="features">
							<li><p class="p-icone-tabela">
                            <select class="select-ciclos" name="select" onchange="document.getElementById('selecionado1').innerHTML = '' + this.value;">   
    <option value="<sup>R$</sup><span>16,99</span>/mês" selected="selected">Mensal</option>
    <option value="<sup>R$</sup><span>48,93</span>">Trimestral -4%</option>  
    <option value="<sup>R$</sup><span>93,78</span>">Semestral -8%</option>
    <option value="<sup>R$</sup><span>169,99</span>/ano">Anual -16%</option>  
                            </select></p></li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-hdd icone-tabela"></i>150GB de espaço</p></li>
							<li><p class="p-icone-tabela"><i class="icon-exchange icone-tabela"></i>Tráfego ilimitado</p></li>
                            <li>
                              <p class="p-icone-tabela "><i class="icon-envelope-alt icone-tabela"></i>E-mails ilimitados</p></li>
							<li>
							  <p class="p-icone-tabela"><i class="icon-globe icone-tabela"></i>Hospede até 6 domínios</p></li>
                                                        
						</ul><!--end:features-->
						
						<div class="pricing-footer">
							<a class="flx-blue-button flx-button" href="#">Contrate agora</a>
							<p> </p>
						</div><!--end:pricing-footer-->			
					</div><!--end:pricing-column-->
					<div class="pricing-column">
						<div class="pricing-header">
							<div class="pricing-title">Plus</div>
							<div id="selecionado2" class="price"><sup>R$</sup><span>24,99</span>/mês</div>
						</div><!--end:pricing-header -->
						<ul class="features">
							<li><p class="p-icone-tabela">
                            <select class="select-ciclos" name="select" onchange="document.getElementById('selecionado2').innerHTML = '' + this.value;">   
    <option value="<sup>R$</sup><span>24,99</span>/mês" selected="selected">Mensal</option>
    <option value="<sup>R$</sup><span>71,97</span>">Trimestral -4%</option>  
    <option value="<sup>R$</sup><span>137,94</span>">Semestral -8%</option>
    <option value="<sup>R$</sup><span>249,99</span>/ano">Anual -16%</option>  
                            </select></p></li> 
                            <li>
                              <p class="p-icone-tabela"><i class="icon-hdd icone-tabela"></i>250GB de espaço</p></li>
							<li><p class="p-icone-tabela"><i class="icon-exchange icone-tabela"></i>Tráfego ilimitado</p></li>
                            <li>
                              <p class="p-icone-tabela "><i class="icon-envelope-alt icone-tabela"></i>E-mails ilimitados</p></li>
							<li><p class="p-icone-tabela"><i class="icon-globe icone-tabela"></i>Hospede até 10 domínios</p></li>
                        </ul><!--end:features-->
						<div class="pricing-footer">
							<a class="flx-blue-button flx-button" href="#">Contrate agora</a>
						</div><!--end:pricing-footer-->			
					</div><!--end:pricing-column-->                
				</section>
                <br/><br/>
</body>
</html>

Nele eu seleciono o período do plano e ele troca a div. Como faço para que ele troque suavemente para o novo valor?

Tipo isto: http://www.kinghost.com.br/planos

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Röhers    0

Lucas Röhers
Postado

Usa javascript para alterar os valores que estão dentro da div, conforme escolhido no select

Mas como vou integrar o Javascript com o select se o mesmo já possui todas strings usadas? Tem algum exemplo ?

 

 

Alguém ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

samoelyeshua    15

samoelyeshua
Postado

Vamos imaginar esse exemplo:

 

<select id="select_periodicidade">
 <option value="mensal">Mensal</option>
 <option value="trimestral">Trimestral</option>
</select>

<div id="plano_1">
 <p id="valor_plano_1">100 Reais</p>
</div>

Ok, esse é um exemplo do html, agora vejamos como manipulamos isso com jquery

$(document).ready(function(){
  $("#select_periodicidade").change(function(){
      var periodicidade = $("#select_periodicidade option:selected").text();
      if(periodicidade == "Trimestral"){
          $("#valor_plano_1").text("300 Reais");
      }else if(periodicidade == "Mensal"){
          $("#valor_plano_1").text("100 Reais");
      }
  });
});

 

Segue um JSFiddle para você entender o código
http://jsfiddle.net/8LGEw/



Da uma olhada na documentação da Jquery tbm

http://api.jquery.com/change/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito