Ir para conteúdo
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!

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

Compartilhar este post


Link para o post
Compartilhar em outros 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

 

Compartilhar este post


Link para o post
Compartilhar em outros 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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por reginaldo123
      boa tarde 
       
      quero chamar um arquivo. php para realizar uma consulta ao banco de dados , e exibir as informações , é tipo um <form action="">, so que eu quero usar um link <a> como passar as variaveis , para o arquivo.php?, é tipo o site do youtube apresenta varios videos , e ao clicar no video é redirecionado para outra pagina.
    • Por Luiz Fernando 111
      Caros amigos, estou tentando adicionar soma entre inputs do html e do javascript, mas com esse exemplo, apenas consegui colocar no input do html. Como faço para implementar no input do javascript e somar o valor junto com o Valor Total mostrar lucro quando foi debito e prejuizo quando for crédito ? Alguém poderia me dá help !!!
       
       

    • Por allancisneiro
      pessoal boa tarde, estou construindo um arquivo HTML, porém estou com um problema de alinhamento do texto apartir do segundo<H1>.  já tentei  usar o comando align:"left". mas não funcionu.
      quem puder ajudar agradeço. a ideia é alinhar tudo à esquerda
       
      este arquivo contém este código-fonte:
       
      <!DOCTYPE html>
      <html>
      <head>
      <title>Título da página</title>
      <meta charset="utf-8"/>
      </head>
      <body>
      <h1>Lista não ordenada</h1>
      <ul>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      <h1 align="left">Lista ordenada</h1>
      <OL>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      </OL>
          
      </body>
      </html>

×

Informação importante

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