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 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? 
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por jaquelss
      Os erros estão na imagem anexada. Não sei exatamente o que colocar quanto o conteúdo no menu, mas quanto ao botão segue abaixo:
       
      <div class="col-md-2 col-sm-6 col-6">
      <button class="button button-rounded btn-block nomargin"
      style="margin-top: 29px !important;"><a href="http://localhost/xavier/#/imovel"></style>Encontrar</a></button>
      </div>
       
      Tenho certeza que é uma bobagem minha, mas perdi a tarde tentando resolver.
      Ainda sou estudante, não tenho conhecimento total quanto a isso (apesar de que acho que ninguém tem né kk).
      Enfim,
      Agradeço desde já.

    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por bessa238
      Bom dia galera, estou tendo um problema com meu código, eu trago os dados do banco mas tenho 2 SELECT dependentes, um com estado e a cidade, segue o código
                  $.when(                 $('#estado').val(data.estado), //o valor da option no select estado ( já está preenchido com os values desde o carregamento da página ) é setado.                 $('#estado').change()) //o método change() é chamado para que o carregamento das cidades no select 2 ( cidades ) é feito.             .then(function() {                 $('#cidade').val(data.cidade); //deveria setar a cidade vinda do banco como a option no select.             }); funcional apenas até a parte do $('#estado').change(), a cidade ( vinda do banco ) é até setada por um breve momento, questão de 0,25 segundos, depois o valor que aparece na cidade é alterado e setado como a primeira option dentre todas opções do select. Alguém já passou por tal problema ? estou a um tempo atrás de solução e não consigo obter nenhuma resposa, porém sei que é possível fazer como isso é apenas um formulário de cadastro para edição, muitos outros sistemas e sites usam este recurso. Desde já, obrigado a todos !
×

Informação importante

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