fonction pour définir la classe actuelle dans js

Question

Ce que je veux faire est d'avoir une fonction qui s'exécute pour définir une classe "en cours" à une balise <li>, en fonction du nom de la page. Par exemple, si la page s'appelle index.php, je veux que la fonction détermine si le lien dans la balise <li> porte le même nom que la page (index.php). Je suis désolé je ne suis pas le meilleur à expliquer cela. Voici un exemple de code.

<ul id="navigation"><li><a href="index.php"></li></ul>. 

Je veux la classe « courant » défini dans la balise <li> si le lien est le même que le nom de la page. Est-ce qu'il y a un moyen de faire ça? Ou suis-je dans une mission futile?

Answer 1

Eh bien ... ça va ...

function liClass(context) { 
    //Choose your parent node 
    context = context || document; 

    var pathparts = window.location.pathname.split('/'); //split on path 
    var curfile = pathparts[pathparts.length-1]; //last item is the filename right? 

    var lis = context.getElementsByTagName('li'); 
    for (var i=0, l=lis.length; i<l; i++) { 
    var a = lis[i].getElementsByTagName('a'); 

    if (!a.length) continue; //li has no a, moving on... 

    //Okay, this match might need some work, tried 
    //to make it fairly forgiving, tweak for your needs 
    if (a[0].href.indexOf(curfile) != -1) lis[i].className = 'current'; 
    } 
} 

Ne hésitez pas à l'essayer, laissez-moi savoir si cela fonctionne ou non, parce que je ne l'ai pas le tester ...

Answer 2

Je pense Ce que vous demandez, c'est que vous voulez changer l'apparence des liens qui pointent vers la page actuelle. Voici à quoi ressemblerait le code.

var list=document.getElementsByTagName('a'); 
var page=window.location.pathname; 
var i=list.length; 
while(i--){ 
    if(list[i].src.indexOf(page)>0){ 
    list[i].className='current'; 
    } 
} 

Notez que cette méthode n'est pas très précise. La structure de base est correcte, mais par exemple un lien somewebsite.com pointe actuellement vers somewebsite.com/index.php. Donc, selon le lien, cela pourrait causer un problème sur la page d'accueil. En outre, en fonction de la configuration de vos liens, vous devrez probablement analyser la variable de page. Cela retournera quelque chose comme. /help/faq/foo.php alors que la page peut seulement avoir un lien vers faq/foo.php. Tout cela dépend beaucoup de la configuration de votre site, donc je vais le laisser à vous de le modifier.

Vous avez ajouté plus de détails depuis que j'ai posté, donc j'ai pensé que vous auriez seulement besoin de faire une liste des liens dans les tags <li> pas tous les tags <a> dans la page.

Answer 3

Comparez les valeurs href de l'objet d'emplacement et l'élément DOM d'ancrage. Si elles correspondent, alors c'est la classe actuelle.

Si la page en cours est http://www.example.com/home qui contient un lien relatif,

<a href="/questions">Questions</a> 

Alors la propriété href de l'objet DOM contiendra le chemin absolu, et non seulement la partie relative.

link.href = "http://www.example.com/questions" 

Une fonction qui fait une boucle à travers chaque lien pourrait alors être écrite comme,

function markCurrent(list) { 
    var listItems = list.getElementsByTagName("li"); 

    for(var i = 0; i < items.length; i++) { 
     var link = listItems[i].getElementsByTagName("a")[0]; 
     if(link && (link.href == location.href)) { 
      listItems[i].className += ' current'; 
     } 
    } 
} 

passer le noeud racine <ul> à la fonction.

markCurrent(document.getElementById("navigation"));