Jump to content
tiago.nunes9

Botão para alterar texto

Recommended Posts

tiago.nunes9

Boas,

Foi-me pedido para no site que estou a desenvolver numa pagina criar tipo um submenu com uns 4 botões e ao clicar no botão muda o texto a apresentar.
Não quero criar submenus porque não quero que isso saia do mesmo url, quero tudo na mesma pagina e sei que isso se pode fazer em javascript mas não sei qual o código.
Alguém me pode dar uma ajudinha?

O codigo que estou a usar agora é este:

<button id="botao1" onclick="show('texto1')">Botão 1</button>
<button id="botao2" onclick="show('texto2')">Botão 2</button>

<div class="texto-ocultar" id="texto1">OLÁ TEXTO 1</div>
<div class="texto-ocultar" id="texto2" style="display:none">OLÁ TEXTO 2</div>

<script>
function show(target){
document.getElementByClass('texto-ocultar').style.display = 'none';
document.getElementById('#' + target).style.display = 'block';
}
</script>

E aparecem dois botões. O Botão 1 e o botão 2, mas quando clico no botão 1 ou botão 2 o texto que mostra é sempre o mesmo

Edited by tiago.nunes9
Falta de informação

Share this post


Link to post
Share on other sites
seuqram

Depois de obteres o elemento (não é preciso adicionares "#" antes do nome), podes trocar a informação dentro de qualquer elemento assim: elemento.innerHTML = "novo texto";

Share this post


Link to post
Share on other sites
tiago.nunes9

Eu estou a usar isto no wordpress.
Não sei se é preciso adicionar algo extra ou não.

E então como deve ficar o código final?

Share this post


Link to post
Share on other sites
JakeBass

ao selecionar através da classe obtém-se um array, assim já deve funcionar:

function show(target){
  var all_texts = document.getElementsByClassName('texto-ocultar');
  for(var i = 0; i < all_texts.length; i++) {
    all_texts[i].style.display = 'none';
  }
  document.getElementById(target).style.display = 'block';
}

 

Share this post


Link to post
Share on other sites
seuqram
<button id="botao1" onclick="show('texto1')">Botão 1</button>
<button id="botao2" onclick="show('texto2')">Botão 2</button>

<div id="texto"></p>

<script>
function show(target){
  
	const TEXTO{
  		texto1:"Texto 1";
  		texto2:"Texto 2";
    }
	texto = document.getElementById("texto");
	texto.innerHTML = TEXTO[target];
}
</script>

Podes fazer isso. Repara que a cada click do botão, chama a função "show" que irá mudar a informação de dentro do elemento com id "texto", como eu disse anteriormente.

Essa é a melhor forma de resolver o teu problema (que eu acho). Mas se quiseres continuar com o modelo que apresentaste anteriormente, tens de corrigir o que eu também já te disse ( não juntares o "#" aqui: )

document.getElementById('#' + target)

E também mudares isto:

//document.getElementByClass('texto-ocultar').style.display = 'none'; (Invádido)

//Para isto:

var Array = document.getElementByClass('texto-ocultar');

for(var i = 0; i < Array.length; i++)
{
  Array[i].style.display = 'none';
}

Nunca trabalhei com o WordPress, por isso não te posso ajudar se for o caso de presisares de "mais algumas coisa". (Duvinho que tenhas)

Edited by seuqram

Share this post


Link to post
Share on other sites
HappyHippyHippo

sabes porque não tens uma resposta rápida e adequada ao teu problema ? desde quando é que isto é um problema de Java ?

agora diz exactamente o que pretendes fazer, porque o exemplo/código que apresentas não bate certo com o que escreveste. se te ajudar, faz um desenho


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
HappyHippyHippo

o que queres são tabs !!!

o que não faltam são exemplos e/ou scripts online para fazer isso

  • Vote 1

IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.