Comment mettre en surbrillance un lien d'une liste imbriquée générée par PHP

Question

J'ai un script PHP qui affiche tous mes sujets dans une liste imbriquée et je veux pouvoir cliquer sur un lien, et ce faisant, le mettre en surbrillance, mais je ne le fais pas Je sais comment y aller avec mon code actuel, quelqu'un peut-il m'aider avec cela?

J'utilise PHP, CSS et JQuery

Voici mon code PHP pour afficher tous mes sujets dans les listes imbriquées.

function make_list ($parent = 0, $parent_url = '') { 
    global $link; 
    echo '<ol>';     
    foreach ($parent as $id => $cat) { 
     $url = $parent_url . $cat['url']; 
     echo '<li><a href="' . $url . '" title="' . $cat['category'] . ' Category Link">' . $cat['category'] . '</a>';   

     if (isset($link[$id])) { 
      make_list($link[$id], $url); 
     }    
     echo '</li>'; 
    }  
    echo '</ol>'; 
} 

$mysqli = mysqli_connect("localhost", "root", "", "sitename"); 
$dbc = mysqli_query($mysqli,"SELECT * FROM categories ORDER BY parent_id, category ASC"); 
if (!$dbc) { 
    print mysqli_error(); 
} 

$link = array(); 
while (list($id, $parent_id, $category, $url) = mysqli_fetch_array($dbc)) { 
    $link[$parent_id][$id] = array('category' => $category, 'url' => $url); 
} 

make_list($link[0]); 

Answer 1

Vous devriez regarder les pseudo classes CSS pour les liens (see here par exemple). Si vous ne voulez pas mettre tous les liens en surbrillance, vous pouvez ajouter un attribut de classe au code php, puis l'utiliser dans css pour spécialiser les pseudo-classes, par exemple:

Compte tenu du lien suivant créé par phpcode (avec classe):

<li><a href="http://..." class="highlightedLink">Some Text</a></li> 

vous pouvez maintenant le style qui pointent à l'aide du sélecteur CSS suivant:

a.highlightedLink:hover { 
    background-color: Gray; 
    color: white; 
} 

Cela Soulignez le lien lorsque vous déplacez votre souris sur le lien. D'autres pseudo-classes vous permettent de personnaliser le lien. Reportez-vous à la référence ci-dessus pour les pseudo-classes disponibles pour les liens.

Answer 2

Ajoutez une classe à vos liens. Votre html généré devrait ressembler à ceci:

<ol> 
    <li><a href="#" class="clickable">Link Text</a></li> 
</ol> 

Vous devez utiliser la méthode .live() pour permettre aux nouveaux éléments ajoutés ont le gestionnaire d'événements « clic » lié à eux

$(document).ready(function(){ 
    $('a.clickable').live('click',function(){ 
     $(this).css("background-color","yellow"); 
    }); 
}); 

Cela va changer l'arrière-plan du <a> en jaune. Pour modifier l'arrière-plan du <li>, utilisez $(this).parent().css().

Avec cette méthode, une fois l'arrière-plan défini, vous ne pouvez pas l'éteindre tant que la page n'est pas rechargée ou que vous ne déclenchez aucun autre événement.

Si vous souhaitez que la surbrillance soit activée ou désactivée, créez une classe CSS pour celle-ci (par exemple .highlight) et ajoutez la background-color: yellow à la classe. Alors, au lieu de:

$(this).css("background-color","yellow"); 

Vous pouvez utiliser:

$(this).toggleClass('highlight'); 

Answer 3

Cela devrait être assez simple, avec les éléments suivants jQuery:

$('li a').click(
    function(){ 
     $('.active').removeClass('active'); 
     $(this).addClass('active'); 
    }); 

et CSS:

a.active:link, 
a.active:visited { 
    background-color: #ffa; /* or whatever */ 
} 
a.active:hover { 
    text-decoration: underline; 
    background-color: #f90; /* or, again, whatever */ 
} 

Demo at: JS Fiddle.

---

Edité ajouter ce qui suit:

Si vous essayez d'assigner la classe « active » (ou tout autre) de la charge de la page, et les liens sont à d'autres parties de votre site , le suivant pourrait être utile pour vous:

$(document).ready(
    function() { 
     var topUrl = location.href; 

     $('li a').each(
      function() { 
       if ($(this).attr('href') == topUrl) { 
        $(this).addClass('active'); 
       } 
      }); 
    }); 

efficacement attribue l'URL de la page en cours à la variable « topUrl », et vérifie si des liens dans chacun des li éléments lien à la page actuelle, un nd, si oui, affecte la classe 'active' à ce lien. Il nécessite cependant, dans son incarnation courante, des chemins absolus (non relatifs) dans les attributs des éléments 'href.

---

Edité pour affiner un peu le script, pour supprimer l'exigence de chemins absolus dans les href s.

$(document).ready(
    function() { 
     var topUrl = location.href.split('/').pop(); 
     $('li a[href$=' + topUrl + ']').addClass('active'); 
    }); 

Dans cette incarnation l'URL est divisée sur le caractère /, et la dernière partie du tableau retourné est stocké dans la variable topUrl. Le jQuery puis recherche un élément a dans un élément li pour voir si l'un de ces éléments se terminent par la même partie, de sorte que:

www.example.com/index.html 

pourrait affecter la classe « actif » pour un élément quelconque a dont href extrémités en index.html, ce qui n'est évidemment pas sans problèmes.