Dynamique fil d'ariane, sur la base actuelle de la page à l'aide de Javascript/jQuery

J'ai regardé la question ici et la réponse avait l'air bien assez, si l'on n'a pas réellement naviguer trop.

J'ai besoin d'un Javascript/jQuery script, basé sur l'URL de la page en cours, peut créer de la chapelure avec les parents de cette page, c'est à dire: 

 <nav class="items">
 <ul>
 <li><a href="test.html">Test 1</a></li>
 <li><a href="test2.html">Test 2</a>
    <ul>
        <li><a href="level1.html">Level 1</a></li>
        <li><a href="test/level2.html">Level 2</a>
            <ul>
                <li><a href="test/level2/level3.html">Level 3</a></li>
                <li><a href="test/level2/level32.html">Also at level 3</a></li>
            </ul>
      </li>
    </ul>
 </li>
 <li><a href="test3.html">Test 3</a></li>
</ul>
</nav>

Si l'utilisateur navigue au Niveau 3, sur la base actuelle de la page, afficher:

Accueil >> Test 2 >> Niveau 2 >> Niveau 3

Ce script sera inclus dans chaque page, de sorte qu'il fonctionne onload.

InformationsquelleAutor baron5 | 2014-09-15
  1. 4

    Vous pouvez essayer le code suivant dans le document de prêt de l'événement de la page. 

    var url = "level3.html"; <-- following line shows how to get this from url
//location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
var currentItem = $(".items").find("[href$='" + url + "']");
var path = "home";
$(currentItem.parents("li").get().reverse()).each(function () {
    path += "/" + $(this).children("a").text();
});
$(".bredcrumb").html(path);

    Démo

    Encas si vous voulez de navigation avec les liens de navigation essayer cette Démo

    • Super, c'était sur place! Je suis un extra / après à la Maison, mais il est probablement juste mon code html, et donc je peux travailler autour de cela. Merci!!!!
    • Ce qui est excellent. Je suis en train de travailler sur bootstrap chapelure style avec cette fonction récursive.
    InformationsquelleAutor Chamika Sandamal
  2. 0

    Si vous allez naviguer sur requête http, ce code peut ne pas bien fonctionner pour vous.

    Si vous allez avoir des pages html à naviguer par le biais de ce menu, vous pouvez avoir un peu de code de travail sur la charge de chaque page html que vous avez, pour construire le fil d'ariane selon cette page.

    Mais si vous allez pour naviguer dans le contenu via ajax, vous pouvez utiliser ce code. Et de mettre votre contenu en fonction de charge de l'intérieur, cliquez sur l'événement.

    • Le javascript je pense sera de travailler sur chaque charge, sans ajax sera utilisé.
    • Êtes-vous la construction d'un site en html ou en utilisant n'importe serverside de programmation que vous pouvez passer le courant de la page info pour créer le fil d'ariane?
    • En essayant de créer un organisme indépendant haut-de html qui sera inclus à la fois dans les applications à serverside programmation backend et dans un wordpress instance. C'est pourquoi j'aimerais qu'il soit javascript. Je sais que l'on peut obtenir la page en cours avec $(emplacement).attr('href'); . Donc, Il serait itération par ul pour trouver l'url similaire que celui que je suis en train de visionner.
    • vérifiez ce violon jsfiddle.net/rpyxcbok/2 si je vous suis, la droite cela ne.
    • Merci, sympa de violon 🙂 Un pas de plus, mais il ne serait pas travailler avec le filestructure à portée de main.
    InformationsquelleAutor Azadrum