javascript e css - template

[yenny]

ciao a tutti...

ho fatto dei pulsanti(menu) con i css... pulsanti nella quale quando ci clicco su una di loro cambia colore... guardate l'immagine giù in basso.

il codice del pulsante sarebbe:

<id="pulsante">
<ul>
<li class="pagina" id="paginacorrente"><a href="#">HOME[/url]
<li class="pagina"><a href="chi-siamo.html">CHI SIAMO[/url]
<li class="pagina"><a href="lo-staff.html">LO STAFF[/url]
<li class="pagina"><a href="spettacoli.html">SPETTACOLI[/url]
<li class="pagina"><a href="#">PHOTOGALLERY[/url]
<li class="pagina"><a href="#">CONTATTI[/url]
<li class="pagina"><a href="#">[/url][/list]
</div>

id="paginacorrente" cambia il colore del pulsante... e fin qui tutto bene!


ma quando ho fatto il template dei pulsanti(menu)... il colore rimane sempre
nella pagina home.

io ho tolto id="paginacorrente" dal codice... e adesso nn trovo il modo per
far cambiare colore al pulsante cliccato... beh ho trattato di farlo con javascript
ma nn sono brava.

<script type="text/javascript">

var i=0;
function cambia_id(tag,n,_id)
{
for(i=0;i<7;i++)
{
var val=document.getElementsByTagName(tag).id;
if(val=='paginacorrente')
{
document.getElementsByTagName(tag).id="";
}
}

document.getElementsByTagName(tag)[n].id=_id;
}

</script>


<div id="pulsante">
<ul>
<li class="pagina" id=""><a href="#" onclick="cambia_id('li',0,'paginacorrente')">HOME[/url]
<li class="pagina" id=""><a href="chi-siamo.html" onclick="cambia_id('li',1,'paginacorrente')">CHI SIAMO[/url]
<li class="pagina" id=""><a href="lo-staff.html" onclick="cambia_id('li',2,'paginacorrente')">LO STAFF[/url]
<li class="pagina" id=""><a href="spettacoli.html" onclick="cambia_id('li',3,'paginacorrente')">SPETT ACOLI[/url]
<li class="pagina" id=""><a href="#" onclick="cambia_id('li',4,'paginacorrente')">PHOTO GALLERY[/url]
<li class="pagina" id=""><a href="#" onclick="cambia_id('li',5,'paginacorrente')">CONTA TTI[/url]
<li class="pagina" id=""><a href="#" onclick="cambia_id('li',6,'paginacorrente')">[/url][/list]
</div>


aiuto!!!!

[Xinod]

ma se cliccare su questi link ha come conseguenza il cambio di documento non risolvi nulla cambiando il colore al click

ci sono vari modi per ottenere quello che chiedi,
il piu' valido e' comparare la location con gli href contenuti nella lista e sattare l' id al padre del link opportuno
ed e' anche meglio se questa procedura viene fatta lato server, quando il menu' viene servito al client

altrimenti, si puo' ottenere lo stesso risultato usando la sola ereditarieta' dei css,
ma devi specificare un id significativo per il body di ogni singola pagina
e un id diverso per ogni list item nel menu'

[Outshine84]

idcorrente sarebbe più conveniente metterlo forse come attributo class...
dovretsi dare ad ogni voce del menu un id .
......
<li class="pagina" class="idcorrente" id="4"><a href="#" onclick="javascript:cambia_id(4)">PHOTOGALLERY[/url]
<li class="pagina" id="5" onclick="javascript:cambia_id(5)"><a href="#">CONTATTI[/url]
.........
e poi chiamare una funzione tipo :

<script type="text/javascript">
var i=0;
function cambia_id(id)
 {
     var val=document.getElementsByTagName('li'); 
     for(i=0;i<val.length;i++){
         if(val[i].getAttribute('id')=id) {val[i].setAttribute('class','idcorrente')}
         else{ val[i].RemoveAttribute('class') = "";}
     }
}
</script>

[yenny]

ho provato a farlo ma penso k nn si puo mettere due aattributi class in un tag, come[*]

ragazzi io nn ci capisco molto su javascript ma ci sto giocando... almeno ho la base.
Xfavore aiutatemi!! abbiate paziensa!!!



function cambia_id(id)
{
var val=document.getElementsByTagName('li');
for(i=0;i<val.length;i++){
if(val[i].getAttribute('id')=id) {val[i].setAttribute('class','idcorrente')}
else{ val[i].RemoveAttribute('class') = "";}
}




<ul>

<li class="pagina" class="paginacorrente" id="0" onclick="cambia_id(0)">HOME

<li class="pagina" id="1" onclick="cambia_id(1)">CHI SIAMO

<li class="pagina" id="2" onclick="cambia_id(2)">LO STAFF

<li class="pagina" id="3" onclick="cambia_id(3)">SPETTACOLI

<li class="pagina" id="4" onclick="cambia_id(4)">PHOTOGALLERY

<li class="pagina" id="5" onclick="cambia_id(5)">CONTATTI

<li class="pagina" id="6" onclick="cambia_id(6)">
[/list]

[Xinod]

leggi la mia risposta, potresti star solo perdendo tempo

[Outshine84]

la cosa più semplice in assoluto sarebbe fare 5 pagine html che abbiano la stessa struttura ma diverso contenuto interno... chiamarle col nome che richiami dal menù e poi nella menu di ogni pagina distingui qual'è quella corrente... tipo home.html hai così:

<ul>

<li class="pagina" class="paginacorrente" id="0">HOME

<li class="pagina" id="1">CHI SIAMO

<li class="pagina" id="2">LO STAFF

<li class="pagina" id="3">SPETTACOLI

<li class="pagina" id="4" >PHOTOGALLERY

<li class="pagina" id="5" >CONTATTI
[/list]

nella pagina chi-siamo.html metti invece un menu fatto così :

<ul>

<li class="pagina"  id="0">HOME

<li class="pagina" class="paginacorrente" id="1">CHI SIAMO

<li class="pagina" id="2">LO STAFF

<li class="pagina" id="3">SPETTACOLI

<li class="pagina" id="4" >PHOTOGALLERY

<li class="pagina" id="5" >CONTATTI
[/list]

etc etc...

in ogni pagina segni come paginacorrente la pagina stessa e ti sembra alla fine di avere un unica pagina in cui cambia solo il menù in lato e il contenuto all'interno e tutto il resto rimane =