Botão para alterar texto

[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 October 11, 2016 at 08:32 AM by tiago.nunes9
Falta de informação

[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";

[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?

[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';
}

[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 October 11, 2016 at 02:01 PM by seuqram

[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

[tiago.nunes9]

Vou dar um exemplo: http://agr1156.cne-escutismo.pt/fe/

Nessa página tu tens lá uns botões que dizem "Semana 1" "Semana 2" "Semana 3" "Semana 4".

E sempre que se clica num dos botões aparece um texto diferente.

[JakeBass]

já foram apresentadas duas soluções, funciona ou não?

[tiago.nunes9]

Sim, obrigado

[HappyHippyHippo]

o que queres são tabs !!!

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