Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

hmoreira

Javascript com CSS

Mensagens Recomendadas

hmoreira

Boa noite a todos.

Preciso de uma ajuda.

1º - Tenho uma função em java script que "mostra" ou esconde divs.

2º - Preciso que, quando a div que estiver a ser visualizada, o link referente esteja de cor diferente.

Mostro o código:

Aqui o código que mostra ou esconde as DIVs

<script type="text/javascript"><!--

function show_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = "block";
}
}

function hide_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = "none";
}
}
//--></script>

Aqui os links que utilizam as funções. Mas é aqui que está o problema, eu preciso que ao clicar por exemplo onde tem "parte 1", esse link fique de cor diferente dos outros, e assim sucessivamente.

<a href="#" class="tabelas" onclick="show_visibility('parte1');hide_visibility('parte2','parte3', 'parte4','parte5')">Parte 1</a> 
                    <a href="#" class="tabelas" onclick="show_visibility('parte2');hide_visibility('parte1','parte3', 'parte4','parte5')">Parte 2</a> 
                    <a href="#" class="tabelas" onclick="show_visibility('parte3');hide_visibility('parte1','parte2', 'parte4','parte5')">Parte 3</a> 
                    <a href="#" class="tabelas" onclick="show_visibility('parte4');hide_visibility('parte1','parte2', 'parte3','parte5')">Parte 4</a> 
                    <a href="#" class="tabelas" onclick="show_visibility('parte5');hide_visibility('parte1','parte2', 'parte3','parte4')">Parte 5</a> 

Obrigado desde já.

Cumprimentos,

HM

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

<style>
/* estilo normal das entradas */
a.tabelas {
    display: none;
}
/* estilo visivel e com cor diferente */
a.show_tabelas {
    display: block;
    color: #f00;
}
</style>

<script type="javascript">
function toggleVisibility(anchor) {
    /* remover todas as tags com a classe show_tabelas */
    document.getElementsByClassName("show_tabelas").className = document.getElementsByClassName("show_tabelas").className.replace( /(?:^|\s)show_tabelas(?!\S)/ , '' );
    /* adicionar a classe show_tabelas a tag escolhida */
    anchor.className += " show_tabelas";
}
</script>

<a href="#" class="show_tabelas" onclick="return toggleVisibility(this);">Parte 1</a> 
<a href="#" class="tabelas" onclick="return toggleVisibility(this);">Parte 2</a> 
<a href="#" class="tabelas" onclick="return toggleVisibility(this);">Parte 3</a> 
<a href="#" class="tabelas" onclick="return toggleVisibility(this);">Parte 4</a> 
<a href="#" class="tabelas" onclick="return toggleVisibility(this);">Parte 5</a> 


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

<style>
/* estilo normal das entradas */
a.tabelas {
    display: none;
}
/* estilo visivel e com cor diferente */
a.show_tabelas {
    display: block;
    color: #f00;
}
</style>

<script type="javascript">
function toggleVisibility(anchor) {
    /* remover todas as tags com a classe show_tabelas */
    document.getElementsByClassName("show_tabelas").className = document.getElementsByClassName("show_tabelas").className.replace( /(?:^|\s)show_tabelas(?!\S)/ , '' );
    /* adicionar a classe show_tabelas a tag escolhida */
    anchor.className += " show_tabelas";
}
</script>

<a href="#" class="show_tabelas" onclick="return toggleVisibility(this);">Parte 1</a> 
<a href="#" class="tabelas" onclick="return toggleVisibility(this);">Parte 2</a> 
<a href="#" class="tabelas" onclick="return toggleVisibility(this);">Parte 3</a> 
<a href="#" class="tabelas" onclick="return toggleVisibility(this);">Parte 4</a> 
<a href="#" class="tabelas" onclick="return toggleVisibility(this);">Parte 5</a> 

Gosto mais de:

<script type="javascript">
function toggleVisibility(anchor) {
node = // Obter o node seja de q maneira for, por exemplo getElementsByClassName() ou getElementById() ou até através do parametro anchor.
node.classList.toggle('show_tabelas');
}
</script>


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
hmoreira

Antes de mais agradeço a vossa ajuda... mas não funcionou...

nos links só aparece o link para a "parte 1"...

Não sei se me expliquei bem anteriormente, mas o que isto faz é:

Tenho uma barra de links, que quando clicados, escondem a div visivel, e mostram a div correspondente a esse link...

Tenho mesmo muita urgência em resolver este problema.

Mais uma vez, o meu  muito obrigado.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Rechousa

Olá,

Ve se isto resolve a tua questão - aproveitei algumas das ideias que foram aqui colocadas:

<style>
/* estilo normal das entradas */
div.hidden { display: none; }

a.tabelas {
    color: #CECECE;
}
/* estilo visivel e com cor diferente */
a.show_tabelas {
    color: #f00;
}
</style>

<script type="text/javascript"><!--

var arr = ['parte1', 'parte2', 'parte3', 'parte4', 'parte5'];

function toggleVisibility(anchor, idToShow)
{
    var showTabelas = document.getElementsByClassName('show_tabelas');
    for(var i = 0; i < showTabelas.length; i++)
    {
    	showTabelas[i].classList.toggle('show_tabelas');
    }
    anchor.classList.toggle('show_tabelas');

    for(var i=0; i<arr.length; i++)
{
	document.getElementById(arr[i]).style.display = (arr[i] == idToShow ? "block" : "none");
}
}
//--></script>

<a href="#" class="show_tabelas" onclick="toggleVisibility(this,'parte1');">Parte 1</a> 
<a href="#" class="tabelas" onclick="toggleVisibility(this,'parte2');">Parte 2</a> 
<a href="#" class="tabelas" onclick="toggleVisibility(this,'parte3');">Parte 3</a> 
<a href="#" class="tabelas" onclick="toggleVisibility(this,'parte4');">Parte 4</a> 
<a href="#" class="tabelas" onclick="toggleVisibility(this,'parte5');">Parte 5</a> 

<div id="parte1">parte1</div>
<div id="parte2" class="hidden">parte2</div>
<div id="parte3" class="hidden">parte3</div>
<div id="parte4" class="hidden">parte4</div>
<div id="parte5" class="hidden">parte5</div>


Pedro Martins

Sharing is Knowledge!

http://www.linkedin.com/in/rechousa

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
hmoreira

Olá Rechousa,

Obrigado pelo teu exemplo, funciona como eu queria, mas tem um pequeno "bug", o link para a "parte 1" fica de cor diferente dos outros.

Isto é, eu coloquei todos os links com cor azul, e caso estejam "seleccionados" ficam vermelhos. No link da parte 1 fica cinza...

Obrigado mais uma vez pela ajuda.

Cumprimentos

HMoreira

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.