2008-11-01 6 views
1

J'essaie d'utiliser des noms de classe pour changer la couleur d'un lien après qu'il a été sélectionné, afin qu'il reste la nouvelle couleur, mais seulement jusqu'à un autre lien est sélectionné, puis il reviendra.Modification de la couleur d'un lien sélectionné incorporé dans une table

J'utilise ce code qui a été publié par Martin Kool this question:

<html>  
<head> 
<script> 
    document.onclick = function(evt) { 
    var el = window.event? event.srcElement : evt.target; 
    if (el && el.className == "unselected") { 
     el.className = "selected"; 
     var siblings = el.parentNode.childNodes; 
     for (var i = 0, l = siblings.length; i < l; i++) { 
     var sib = siblings[i]; 
     if (sib != el && sib.className == "selected") 
      sib.className = "unselected"; 
     } 
    } 
    } 
</script> 
<style> 
    .selected { background: #f00; } 
</style> 
</head> 
<body> 
    <a href="#" class="selected">One</a> 
    <a href="#" class="unselected">Two</a> 
    <a href="#" class="unselected">Three</a> 
    </body> 

Il fonctionne très bien jusqu'à ce que je tente de les liens dans une table. Pourquoi est-ce? Soyez facile, je suis un débutant.


Il n'y a pas d'erreur, les liens sont en train de changer la « choisie » classe, mais quand un lien est sélectionné, les anciens liens gardent la classe à la place « choisie » de changer de « désélectionné ». Fondamentalement, autant que je sache, cela fonctionne comme un attribut de vlink, ce qui n'est pas ce que je vais faire.

Et oui, les liens sont tous dans des cellules différentes, comment suggéreriez-vous que je change le code pour qu'il fonctionne correctement?


OK, en fait, j'ai parlé trop tôt.

document.onclick = function(evt) 
{ 
var el = window.event? event.srcElement : evt.target; 
if (el && el.className == 'unselected') 
{ 
    var links = document.getElementsByTagName('a'); 
    for (var i = links.length - 1; i >= 0; i--) 
    { 
      if (links[i].className == 'selected') 
        links[i].className = 'unselected'; 
    } 
    el.className = 'selected'; 
} 

return false; 
} 

Ce code que vous m'avez donné fonctionne très bien, visuellement, il fait exactement ce que je veux qu'il fasse. Cependant, cela fait que mes liens cessent de fonctionner ... Ils changent de couleur, mais ne lient à rien, et quand je supprime le script, ils fonctionnent bien. Qu'est-ce que je fais de mal/qu'est-ce que je dois changer pour que cela fonctionne?

En outre, je veux faire la même chose ailleurs dans mon site Web, où les liens sont tous dans un tag <div>, séparés par <p> tags. Comment puis-je faire ce travail?

+0

S'il vous plaît envoyer votre code avec les tables. – vaske

+0

tag incorporé supprimé – Ilya

Répondre

1

Vous parcourez les frères et sœurs. Si les liens sont séparés dans <td>, ils ne sont plus frères et soeurs.

Vous pouvez parcourir tous les liens comme celui-ci:

document.onclick = function(evt) 
{ 
    var el = window.event? event.srcElement : evt.target; 
    if (el && el.className == 'unselected') 
    { 
     var links = document.getElementsByTagName('a'); 
     for (var i = links.length - 1; i >= 0; i--) 
     { 
      if (links[i].className == 'selected') 
       links[i].className = 'unselected'; 
     } 
     el.className = 'selected'; 
    } 

    return false; 
} 

J'ai également ajouté un return false; à la fin de la fonction de vous arrêter d'aller à « # »

0

Y at-il une erreur ou est-ce que rien ne se produit? Une bonne première étape si vous êtes un débutant javascript est d'utiliser un outil comme Firebug afin que vous voyiez des messages d'erreur détaillés, et vous pouvez ajouter des instructions console.log pour voir ce qui se passe pendant que vous exécutez votre code.

0

Par "dans les tableaux" voulez-vous dire placer chaque lien dans sa propre cellule? Parce que cela ferait cette ligne:

var siblings = el.parentNode.childNodes; 

ne pas sélectionner d'autres liens en dehors de la cellule. Vous devrez trouver un autre moyen de signaler quel élément est le conteneur de liens.

Questions connexes