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 Ruy Hoffmann
      Olá pessoal, boa tarde,
       
      Eu fiz um site, comprarei o domínio e hospedagem provavelmente ainda hoje (alguma sugestão de um bom provedor de domínios?) e já estou providenciando para que o site ficar no ar. Até ai tudo bem. Esse será um site comercial, então fiz as meta tags para melhorar nas buscas, to pesquisando sobre SEO, etc...
       
      Mas em pararelo fiz um OUTRO site completo também, que vai do index até diversas outras páginas, é um módulo administrativo financeiro que só terá acesso por mim e pela minha esposa. Estou pensando em colocar o acesso no mesmo domínio do site acima, algo do tipo a url do site comercial /admin/a_console.php (que é onde eu e minha esposa efetuaremos nosso login).
       
      Minha pergunta é: para este SEGUNDO SITE que vai trabalhar independente do primeiro eu não quero que as páginas dele apareçam nas buscas, nada, nadinha... Como faço isso? Seria algo do tipo uma INTRANET, onde é acessível pela internet, mas só aparece para quem tem a url da página de login. Alguém sabe como faço para NÃO aparecer?
       
      Obrigado,
       
    • Por Guga Alves
      Olá, estou enfrentando um problema no qual não tinha tido contato até então.

      Alguns textos em uma landing que estou trabalhando simplesmente não exibidos ou apresentam erros na exibição.

      Gostaria de saber se alguém já enfrentado esse problema poderia me ajudar com isso.

      Abaixo segue imagens dos erros
       
       
       


    • Por Incompetech
      Olá a todos. Então.. eu estava praticando um pouco de HTML / CSS e no fim cheguei a um resultado bem legal e simples claro disto aqui:
       
      Eu sei que alguns vão reconhecer isto.. Mas para quem não conhece é algo relacionado ao game MU ONLINE.
      Enfim. Como podem ver eu inventei alguns adicionais que no caso são as características dessa armadura, porém eu gostaria de aplicar um efeito em que esses adicionais apareçam quando eu passar o mouse por cima da imagem da armadura.. como se fosse dentro do game.
      Abaixo vão alguns exemplos:
      Efeito aplicado em um projeto HTML: 

      O mesmo efeito In Game:
       
      Sei que pode parecer algo meio trivial mas gostaria muito de aprender como eu faço para criar algo igual, se puderem me ajudar eu agradeço de coração.
    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
×

Informação importante

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