Selected dinamico

**Ines_88** · 27-01-2011, 20:54

Salve a tutti!
allora, ho un menù contenente link che conducono ad ancoraggi, cioè zone presenti nella stessa pagina.

vorrei creare una classe selected che sottolinei i link della zona della pagina in cui mi trovo, via via che li clicco. Finora, quando creavo dei menù che conducevano a nuove pagine, la cosa era molto semplice, bastava usare un codice tipo questo qua sotto, dichiarando cioè quale [*] era quello corrispondente alla pagina:

<div id="nav">
<ul>[*]home[*]Nature[*]People[*]Visions[/list]
</div>

ma adesso che il codice rimanda alla stessa pagina, cioè come scritto qua sotto?

<div id="nav">
<ul>[*]home[*]Nature[*]People[*]Visions[/list]
</div>

come faccio a farlo spostare ogni volta che clicco sopra un link? è possibile farlo con l'html/css o devo affidarmi a qualcos'altro?

grazie a chiunque mi dedicherà del tempo!

**sandrone65** · 27-01-2011, 21:22

Cliccando su un link che non conduce ad altre pagine non c'è reload della pagina e quindi non puoi risolvere la cosa con i CSS.
Puoi fare facilmente ciò che desideri tramite javascript. Utilizzando ad esempio Jquery è veramente semplice assegnare la classe "selected" all'elemento[*] sul quale clicchi, e rimuovendo parimenti la stessa classe dall'elemento precedente.
Se ti interessa ti si può scrivere un esempio.
Ciao

**Ines_88** · 27-01-2011, 21:27

immaginavo entrasse in gioco jquery

lo so usare molto poco per il momento, quindi se mi puoi far vedere un esempio te ne sarei grata

**sandrone65** · 27-01-2011, 22:03

Beh, mi appello alla clemenza del moderatore se posto un esempio javascript in questo forum.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
 .selected {background:#f00;}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
$('#menu li a').click( function () {
var $this = $(this);
$(".selected").removeClass('selected');
$this.addClass('selected');
});
}); 
</script>
</head>
<body>
<div id="nav">
<ul id="menu">[*]home[*]Nature[*]People[*]Visions[/list]
</div>
</body>
</html>

L'unica cosa che ho cambiato al tuo HTML è l'aggiunta dell'ID al tag <ul>.
Ho impostato alla classe "selected" il background rosso e come vedi cliccando su un link del menu questo diventa a sfondo rosso

Ciao

**Ines_88** · 27-01-2011, 23:52

grazie mille, domani quando sarò al mio pc lo proverò subito e ti dirò se ho qualche problema, grazie mille davvero intanto.

(visto che ormai si parla di javascript potete pure spostarlo nell'apposita sezione allora

)

**Ines_88** · 28-01-2011, 22:07

mmhh... funziona la prima parte, cioè toglie la class selected da dov'è indicata in html, ma non la va a mettere nel li che clicco

**sandrone65** · 29-01-2011, 01:19

Beh, il mio esempio funziona, l'ho riprovato per scrupolo su più browser

Posta la pagina che non ti funziona e vediamo cosa non va, o anche un link.

**Ines_88** · 30-01-2011, 20:51

Allora, ti posto le varie parti di codice, visto che sto lavorando in locale.

Il sito ovviamente è un po' più complesso, e dunque non ho potuto utilizzare alla lettera il tuo codice, e ho sicuramente sbagliato qualcosa nell'adattarlo.

Dal momento che ho due nav, uno per l'home page, uno per le pagine con gli ancoraggi che dicevamo, essi hanno nomi diversi, e diversi richiami selected nel css.

Quello che ci interessa si chiama nav_pic ed il suo selected è:

#nav_pic a.selected {
background: #ef4260;
text-decoration: none;

Il javascript poi non lo scrivo nella pagina html, ma lo richiamo esternamente da un file .js, in cui, tra le altre cose, ho scritto:

$(function() {
$('#menu li a').click( function () {
var $this = $(this);
$(".selected").removeClass('selected');
$this.addClass('selected');
})
})

ho provato a cambiare il ".selected" con "nav_pic a.selected" o altre prove del genere, ma l'unica cosa che il codice riesce a fare, è togliere la class selected dal li dove è indicata se clicco in altri link.
dove sbaglio?

**sandrone65** · 30-01-2011, 22:26

Bisogna vedere l'HTML per poterti rispondere, però fai attenzione che questo codice

codice:

$(function() {
$('#menu li a').click( function () {
var $this = $(this);
$(".selected").removeClass('selected');
$this.addClass('selected');
})
})

non attribuisce la classe ".selected" all'elemento[*], bensì lo attribuisce al tag <a>, forse il tuo problema è qui.
Se mostri l'HTML però è meglio

**Ines_88** · 31-01-2011, 00:50

E' questo qua, ne avevo già riportato uno simile a inizio post, ma questo è proprio quello della pagina in questione:

codice:

<div id="nav_pic">
  <ul id="menu">[*]home[*]My Carpet[*]Aquatic[*]Sea[*]City of Woods[*]Hold Out Your Hand[/list]
</div>

Discussione: Selected dinamico

Strumenti discussione

Ricerca discussione

Visualizza

Class Selected dinamica

Permessi di invio