Basé sur l'URL Comment définir les nœuds de navigation globales (CSOM) comme actif - JavaScript

Question

Je veux utiliser la même navigation partout (mySite, Teamsites ..) Donc, je récupère la navigation globale (gérée de la navigation) de CSOM dans le Masterpage.La navigation globale ne va pas montrer un niveau.

Le problème est que lorsque je suis dans un subsubsite, la navigation ne définit aucun des mots rootnode comme actif.Donc, je ne peux pas utiliser CSS pour styler l'élément.J'ai besoin de définir le bon "noeud" comme étant actif de manière programmatique, où que vous soyez dans la structure

-root
  -sitecoll (internalinfo)
  -subsite (organisation)
  -sitecoll (social)

Ce que je veux, c'est de définir le nœud actif, ci-dessous, vous pouvez voir un exemple de certaines URL.

http://dev.site.com/InternalInfo/.../../../SitePages/home.aspx (set InternalInfo as active)
http://dev.site.com/InternalInfo/Organization/SitePages/home.aspx (set organization as active)
http://dev.site.com/Social/../../../../SitePages/home.aspx (set social as active)

Comme vous pouvez le voir

Quel est le meilleur moyen de faire cela, JavaScript?Quelle est la meilleure façon de vérifier "Sous pathname"?Ex: http: /site.com/sub1/sub2/ ..

Pourrais-je faire quelque chose comme ça?

var currentLocation = window.location;
var pathArray = window.location.pathname.split( '/' );

if(pathArray[2] == "Organisazion")
  setAsActive("Orgainzation");

if(pathArray[1] == "InternalInfo")
  setAsActive("InternalInfo");

Si vous avez une meilleure façon, donnez un exemple.

Answer 1

Je construis quelque chose de similaire.

Je viens de vérifier si l'URL actuelle contient le chemin de mon élément de navigation.Dans votre cas, les URL entraîneraient que plusieurs liens soient marqués comme actifs.Mais avec un ensemble commandé d'URL, vous pouvez éviter cela.

// URLs ordered by length to ensure correct results
var orderesNodes = [];
orderesNodes[0] = "http://dev.site.com/InternalInfo/Organization/";
orderesNodes[1] = "http://dev.site.com/InternalInfo/";
orderesNodes[2] = "http://dev.site.com/Social/";

$.each(orderesNodes, function(index, current){
     if(CheckIfContains(current)){
        //mark as active
        return false; //dont process the rest
     }
});

function CheckIfContains(href) {
    if (window.location.href.indexOf(href) > -1) {
        return true;
    }
    return false;
}

Stockage de navigateur d'accès

    SetValue: function (key, value) {
        /// <summary>
        /// Saves data in the browsers localstorage
        /// </summary>
        /// <param name="key">Key paired with the value. Previous value under that key will be overwritten.</param>
        /// <param name="value">Value paired with the key.</param>
        //JSON is used to save container in the storage, which is by default string only
        localStorage.setItem(key, JSON.stringify(value));
    },
    GetValue: function (key) {
        /// <summary>
        /// Gets data from the browsers localstorage
        /// </summary>
        /// <param name="key">Key paired with the value.</param>
        /// <returns>Value or null if there is no value at the key</returns>
        //JSON is used to save container in the storage, which is by default string only
        return JSON.parse(localStorage.getItem(key));
    },
    DeleteValue: function (key) {
        /// <summary>
        /// Deletes data from the browsers localstorage
        /// </summary>
        /// <param name="key">Key paired with the value.</param>
        localStorage.removeItem(key);
    }