Jump to content
Jason90

Link ativo em HTML

Recommended Posts

Fala galera!

 

Povo, to precisando de uma ajudinha num site que to fazendo. Eu criei um site que funciona como um "guia de bolso", e coloquei um iframe que exibe o conteúdo de acordo com o que o usuário escolher no menu lateral. Em resumo, é uma única página com vários links que exibem conteúdos diferentes nesse iframe.

 

O que eu quero é que o link que o usuário clicar permaneça diferente dos outros enquanto ele está ativo, e no momento que o usuário clicar em outro aconteça a mesma coisa, e assim por diante. Já tentei de tudo via css, java script, mas não consigo. Alguém aí pode me ajudar?

 

Desde já agradeço!

Share this post


Link to post
Share on other sites

Tipo assim?

Spoiler

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .exemplo {
                padding: 1.1rem 2rem;
                border: .062rem solid rgba(0,0,0,.5);
                background-color: #777777
            }
        </style>
    </head>
    <body>
        <a class="exemplo" onclick="modifica(0)">Exemplo 1</a>
        <a class="exemplo" onclick="modifica(1)">Exemplo 2</a>
        <a class="exemplo" onclick="modifica(2)">Exemplo 3</a>

        <script>
            var $cls = document.getElementsByClassName('exemplo');
            var $i;
            function modifica(param) {
                for ($i = 0; $i < $cls.length; $i++) {
                    $cls[$i].style.background = '#777777';
                }
                $cls[param].style.background = '#eeeeee';
            }
        </script>
    </body>
</html>

 

 

  • Obrigado! 1

Share this post


Link to post
Share on other sites
48 minutos atrás, Omar~ disse:

Tipo assim?

  Mostrar conteúdo oculto


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .exemplo {
                padding: 1.1rem 2rem;
                border: .062rem solid rgba(0,0,0,.5);
                background-color: #777777
            }
        </style>
    </head>
    <body>
        <a class="exemplo" onclick="modifica(0)">Exemplo 1</a>
        <a class="exemplo" onclick="modifica(1)">Exemplo 2</a>
        <a class="exemplo" onclick="modifica(2)">Exemplo 3</a>

        <script>
            var $cls = document.getElementsByClassName('exemplo');
            var $i;
            function modifica(param) {
                for ($i = 0; $i < $cls.length; $i++) {
                    $cls[$i].style.background = '#777777';
                }
                $cls[param].style.background = '#eeeeee';
            }
        </script>
    </body>
</html>

 

 

 

Amigo, é pra ser isso... mas quando coloquei no meu código ele não funcionou.

 

Aqui está um trecho do código onde estão os links:

<body>
	<nav id="box-toggle">
		<div id="tgl1">
			<ul>
				<li><a href="#" onclick='insereTexto1()'>Item 1</a></li>
			</ul>
		</div>
		<div id="tgl2">
			<div id="sub1">
				<ul>
					<li><a href="#" onclick='insereTexto2()'>Item 2</a></li>
					<li><a href="#" onclick='insereTexto3()'>Item 3</a></li>
					<li><a href="#" onclick='insereTexto4()'>Item 4</a></li>
					<li><a href="#" onclick='insereTexto5()'>Item 5</a></li>
				</ul>
			</div>
      	</div>
	</nav>
</body>

 

Share this post


Link to post
Share on other sites

insereTexto1()

 

Acredito que você se atropelou na hora de executar a função, a arquitetura seria:

funcao(parametro)

 

Citar

#EDIT: Para que funcione também cada link deve ter uma class ao qual a função vai utilizar para saber o que tem que ser executado dentro do DOM

 

Share this post


Link to post
Share on other sites
9 minutos atrás, Omar~ disse:

insereTexto1()

 

Acredito que você se atropelou na hora de executar a função, a arquitetura seria:

funcao(parametro)

 

 

Cara, na realidade essa função do insereTexto1() é assim mesmo. Mas eu creio que eu deva ter colocado algo errado ali na hora de passar pro meu código, pois agora eu tentei fazer de novo e funcionou! Era exatamente isso que eu precisava!

 

Muito obrigado pela sua ajuda! Abraço!

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

  • Similar Content

    • By JenneferBarbosa
      <label>Data Inicio</label> <input type="date" name="data_inicio-incluir" id="data_inicio-incluir"> <label>Data Fim</label> <input type="date" name="data_fim-incluir" id="data_fim-incluir"> Boa tarde pessoal, estou iniciando em JS e não sei como fazer a validação de datas. Estou fazendo um sistema de aluguel de livros, então,  como consigo verificar se a data_fim não é menor que a data inicio e que a data_fim seja de 1 até 7 dias depois da data_inicio, não podendo ultrapassar. Se alguém tiver como me ajudar, ficarei muito grata.  
    • By Leonardo Ortega
      Prezados, bom dia.
      sou novo por aqui, e me deparei com esta situação:
      estou desenvolvendo um projeto e tudo começou quando apenas mudei o banco de dados que estava conectado. Ou seja, se eu me conecto ao baco de dados anterior, volta todo código html, porém, se conecto ao banco de dados atual as divs desaparecem. 
       
      obs: Isso tb acontece quando eu desativo o php tudo volta como a imagem 1 e se eu ativo fica como a imagem2.
       
      quem pode me ajudar.. desde já muito obrigado.  


    • By thgsousa312
      uma função que recebe uma frase e uma palavra antiga e uma palavra nova. A função deve retornar uma string contendo a frase original, mas com a última ocorrência da palavra antiga substituída pela palavra nova. A entrada e saída de dados deve ser feita no programa principal. Exemplo:  
      Frase: “Quem parte e reparte fica com a maior parte”
      Palavra antiga: “parte”  Palavra nova: “parcela”
      Resultado a ser impresso no programa principal: “Quem parte e reparte fica com a maior parcela”
       
      function trocarNome(){
              
          var frase = document.getElementById("frase").value;
          var strAntiga = document.getElementById("strAntiga").value;
          var strNova = document.getElementById("strNova").value;
          //frase = frase.split(" ");
          var a = frase.lastIndexOf(strAntiga);
          var fras2 = frase.lastIndexOf(strAntiga).replace(strAntiga,strNova);
          document.getElementById("demo").innerHTML = "Certo";
      }
    • By Tuzzolino
      Boa tarde gente,
       
       
      Estou fazendo  um site  e  na hora que eu vou compartilhar ele no whatsapp  ele tá pegando o link corretamente mas ao invés de aparecer o titulo aparece somente o description  e não pega a miniatura da imagem  alguém tem algum exemplo de como  deveria ser ?
       
       
      A  imagem  é carregada assim 
       
      <amp-img height="320" width="470" id="img" src="890x610.jpg" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="responsive"><i-amphtml-sizer style="padding-top: 68.0851%;"></i-amphtml-sizer><img decoding="async" amp-img-id="img" src="890x610.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.