link che indica la pagina in cui ci si trova

**prinzart** · 19-03-2008, 17:52

ciao, come potete vedere andando in questa pagina:

http://download.html.it/categorie/st...-html-visuali/

viene evidenziato il link di quella pagina con il colore giallo (nella colonna di sinistra), come posso implementare la stessa funzione nei link del mio sito?

**Mega69** · 19-03-2008, 20:06

Premesso che probabilmente l'avranno fatto server - side, è possibile farlo anche con js.

codice:

window.onload = function() {
  var cont = document.getElementById("IDoggettoContenenteILinks"),
       a = cont.getElementsByTagName("a"), 
       i = a.length;
  while(i--) {
    if(location.href.indexOf(a[i].href) != -1) {
      a[i].className = "classeCSS";
      break;
    }
  }
}

Occhio che non l'ho testato

**prinzart** · 19-03-2008, 21:05

grazie per la risposta, ma poi come lo utilizzo questo script? Cioè nei link del menu devo mettere qualcosa che richiama questo script, o funziona già da solo, basta che lo aggiungo in ogni pagina?

**Mega69** · 20-03-2008, 09:33

Basta che lo metti in head.
I link devon stare tutti dentro uno stesso contenitore di cui devi specificare l'id.
Ovviamente devi anche creare una classe css ( il nome di questa va messa nello script ) che definisce le regole da applicare al link nel caso sia quello relativo alla pagina.

**prinzart** · 20-03-2008, 10:49

ho fatto così, però non succede niente:
.uno {BACKGROUND: none; COLOR: #ffffff; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none; font-weight:bold}
a.uno:link {BACKGROUND: none; COLOR: #ffffff; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none; font-weight:bold}
a.uno:active {BACKGROUND: none; COLOR: #ffffff; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none; font-weight:bold}
a.uno:visited {BACKGROUND: none; COLOR: #ffffff; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none; font-weight:bold}
a.uno:hover {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none; font-weight:bold}

<HEAD>
<script>
window.onload = function() {
var cont = document.getElementById("menu1"),
a = cont.getElementsByTagName("a"),
i = a.length;
while(i--) {
if(location.href.indexOf(a[i].href) != -1) {
a[i].className = "uno";
break;
}
}
}
</script>
</HEAD>

<div id="menu1">
<table width="168" height="1" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="27" height="20"></td>
<td align="right">protocollo</td>
<td width="5"></td>
<td width="13"></td>
</tr>
<tr>
<td></td>
<td height="1" bgcolor="#E9D1BB" colspan="2"></td><td></td>
</tr>
<tr>
<td></td>
<td align="right" id="activelink">ordini</td>
<td></td>
<td height="20"></td>
</tr>
<tr>
<td></td>
<td height="1" bgcolor="#E9D1BB" colspan="2"></td><td></td>
</tr>
<tr>
<td></td>
<td align="right">attività</td>
<td></td>
<td height="20"></td>
</tr>
<tr>
<td></td>
<td height="1" bgcolor="#E9D1BB" colspan="2"></td><td></td>
</tr>
<tr>
<td></td>
<td align="right">chiamate</td>
<td></td>
<td height="20"></td>
</tr>
<tr>
<td></td>
<td height="1" bgcolor="#E9D1BB" colspan="2"></td><td></td>
</tr>
<tr>
<td></td>
<td align="right">attestati</td>
<td></td>
<td height="20"></td>
</tr>
<tr>
<td></td>
<td height="1" bgcolor="#E9D1BB" colspan="2"></td><td></td>
</tr>
<tr>
<td></td>
<td align="right">prinzworld</td>
<td></td>
<td height="20"></td>
</tr>
<tr>
<td></td>
<td height="1" bgcolor="#E9D1BB" colspan="2"></td><td></td>
</tr>
</table>
</div>

**Mega69** · 20-03-2008, 11:31

Io ho fatto una prova con una pagina chiamata ciao.htm e funziona...

codice:

<html>
<head>
<style type="text/css">
.uno {BACKGROUND: none; COLOR: #ffffff; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none; font-weight:bold}
a.uno:link {BACKGROUND: none; COLOR: #ffffff; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none; font-weight:bold}
a.uno:active {BACKGROUND: none; COLOR: #ffffff; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none; font-weight:bold}
a.uno:visited {BACKGROUND: none; COLOR: #ffffff; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none; font-weight:bold}
a.uno:hover {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none; font-weight:bold}
</style>
<script type="text/javascript">
window.onload = function() {
var cont = document.getElementById("menu1"),
a = cont.getElementsByTagName("a"),
i = a.length;
while(i--) {
if(location.href.indexOf(a[i].href) != -1) {
a[i].className = "uno";
break;
}
}
}
</script>
</head>
</body>
<div id="menu1">
<table width="168" height="1" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="27" height="20"></td>
<td align="right">protocollo</td>
<td width="5"></td>
<td width="13"></td>
</tr>
<tr>
<td></td>
<td height="1" bgcolor="#E9D1BB" colspan="2"></td><td></td>
</tr>
<tr>
<td></td>
<td align="right" id="activelink">ordini</td>
<td></td>
<td height="20"></td>
</tr>
<tr>
<td></td>
<td height="1" bgcolor="#E9D1BB" colspan="2"></td><td></td>
</tr>
<tr>
<td></td>
<td align="right">attività</td>
<td></td>
<td height="20"></td>
</tr>
<tr>
<td></td>
<td height="1" bgcolor="#E9D1BB" colspan="2"></td><td></td>
</tr>
<tr>
<td></td>
<td align="right">chiamate</td>
<td></td>
<td height="20"></td>
</tr>
<tr>
<td></td>
<td height="1" bgcolor="#E9D1BB" colspan="2"></td><td></td>
</tr>
<tr>
<td></td>
<td align="right">attestati</td>
<td></td>
<td height="20"></td>
</tr>
<tr>
<td></td>
<td height="1" bgcolor="#E9D1BB" colspan="2"></td><td></td>
</tr>
<tr>
<td></td>
<td align="right">prinzworld</td>
<td></td>
<td height="20"></td>
</tr>
<tr>
<td></td>
<td height="1" bgcolor="#E9D1BB" colspan="2"></td><td></td>
</tr>
</table>
</div>
</body>
</html>

Sicuramente il problema è uno di questi due:
1) hai utilizzato un altro script che magari entra in conflitto con questo ( nel senso che sovrascrive il window.onload, in questo caso è facilmente risolvibile usando un addEventListener/attachEvent ).
2) c'è qualcosa che non va con l'url; lo script legge l'attributo href e controlla se questa stringa è contenuta all'interno dell'url ( location.href ). Per vedere se il problema è questo devi postare l'url della pagina dove risiede il problema e il valore dell'attributo href che punta verso questa.

**prinzart** · 20-03-2008, 13:07

forse ho capito dov'è il problema, nelle mie pagine il codice css risiede in un file esterno.

In questo caso dovrei fare così?

<script>
window.onload = function() {
var cont = document.getElementById("menu1"),
a = cont.getElementsByTagName("a"),
i = a.length;
while(i--) {
if(location.href.indexOf(a[i].href) == ../images/style.css) {
a[i].className = "uno";
break;
}
}
}
</script>

**Mega69** · 20-03-2008, 14:00

No, quello è l'uri del foglio di stile e per quello che devi fare tu non serve a niente.
Come ti ho detto i dati che bisogna vedere se sono "giusti":
1) l'indirizzo web della pagina .html o .php che ti causa il problema
2) il valore dell'attributo href del tag <a> che punta verso la pagina che ti da il problema

**prinzart** · 20-03-2008, 18:57

dopo molte prove ho capito che c'è un conflitto tra questi due script, o funziona uno o l'altro ma insieme non funzionano, metto in grassetto il codice che non fa funzionare i due script insieme:

<script type="text/javascript">
// INIZIO SCRIPT LINK MENU PAGINA SCELTA
window.onload = function() {
var cont = document.getElementById("menunew"),

a = cont.getElementsByTagName("a"),
i = a.length;

while(i--) {
if(location.href.indexOf(a[i].href) != -1) {
a[i].className = "uno";
break;
}
}
}
// FINE SCRIPT LINK MENU PAGINA SCELTA
</script>

<script>
// INIZIO SCRIPT MENU A COMPARSA
function startmenu()
{
document.getElementById('menu1').style.display = "none";
document.getElementById('menu2').style.display = "none";
document.getElementById('menu3').style.display = "none";
document.getElementById('menu4').style.display = "none";
document.getElementById('menu5').style.display = "none";
document.getElementById('menu6').style.display = "none";
document.getElementById('menu7').style.display = "none";
}
function menufunc(menuId)
{
if(document.getElementById(menuId).style.display == "none")
{
startmenu();
document.getElementById(menuId).style.display = "block";
}
else
{
startmenu();
}
}
// FINE SCRIPT MENU A COMPARSA
</script>

Discussione: link che indica la pagina in cui ci si trova

Strumenti discussione

Ricerca discussione

Visualizza

link che indica la pagina in cui ci si trova

Permessi di invio