Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

hmoreira

Javascript com CSS

Recommended Posts

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

Share this post


Link to post
Share on other sites
HappyHippyHippo

em ves de mudares a visibility muda o css (classe) ...

assim mudas a cor e a visibilidade de uma vez


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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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%.

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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

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

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.