Navigation codée dure dans la page principale - Lien actif ne change pas

Question

Avant mon arrivée, il a été décidé que toute la navigation serait codée dur dans la page principale.J'aimerais pouvoir trouver une raison solide pourquoi, mais pour le moment, il m'échappe.En raison de contraintes de temps, la réécriture de la page principale n'est pas vraiment une option.

Le problème que je dois avoir, c'est la navigation sur d'autres sites (à la maison, les nouvelles, à propos de), le site actif n'est pas reflété dans la navigation.

Voici le code que je travaille avec:

<div class="top_nav">
<span>
    <ul class="list-nav">
        <li class="first"></li>
        <li class="sep-left"></li>
        <li class="selected"><a href="/" target="_self" title="the Nest">
            <span>Home</span></a></li>
        <li class="sep-right"></li>
        <li><a href="/news" target="_self" title="News">
            <span>News</span></a></li>
        <li class="sep"></li>
        <li><a href="/about" target="_self" title="About us">
            <span>About us</span></a></li><li class="sep"></li>
    </ul></span>

<div id="s4-searcharea" class="s4-search s4-rp topBar"><!-- Search -->
    <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
            <SharePoint:DelegateControl runat="server"     ControlId="SmallSearchInputBox" Version="4"/>
    </asp:ContentPlaceHolder>
</div>  

Voici le CSS

/* Top navigation */
div.top_nav{background:transparent url('/Style Library/Images/npe_layout.png') no-     repeat;display:block;height:30px;margin-bottom:10px;width:955px}
.top_nav * {color:#fff}
.top_nav .list-nav{float:left;text-align:center}
    .top_nav .list-nav li{display:inline;float:left;height:24px;list-style-  type:none;padding:0}
    .top_nav .list-nav li.first{margin-left:2px}
        .top_nav .list-nav li a{display:block;height:25px;outline:0;padding:5px 10px 0 10px;text-decoration:none}
            .top_nav .list-nav li a:hover{background:transparent url('/Style Library/Images/npe_layout.png') repeat-x scroll -1011px -186px;height:25px;text-decoration:none!important}
            .top_nav .list-nav li a span{cursor:pointer;display:block;margin:0;padding-top:2px}
    .top_nav .list-nav li.selected {margin-top:4px} 
        .top_nav .list-nav li.selected a{background- color:#fff;color:#8e663c;padding:1px 6px 0}
            .top_nav .list-nav li.selected a:hover{background:#fff none}
            .top_nav .list-nav li.selected a span {color:#369}
    .top_nav .list-nav li.sep {background:transparent url('/Style  Library/Images/npe_layout.png') no-repeat -965px 0;height:25px;margin-top:3px;width:2px}
    .top_nav .list-nav li.sep-left {background:transparent url('/Style Library/Images/npe_layout.png') no-repeat -955px 0;height:27px;margin-top:4px;margin-left:2px;width:5px}
    .top_nav .list-nav li.sep-right { background:transparent url('/Style Library/Images/npe_layout.png') no-repeat -960px 0;height:27px;margin-top:4px;margin-right:2px;width:5px}

Un peu de JavaScript pour aider les choses sur

<script type="text/javascript">
//Sets the selected tab on the Nest global navigation.
function setGlobalNavigationSelected() {

try {

    $(".layout .top_nav ul a").each(function () {
        var href = $(this).attr('href');
        if (href != undefined && href != "") {
            if (href == window.location.href) {

                var previouslyselected = $(".layout .top_nav ul .selected");
                //alert(previouslyselected)
                previouslyselected.removeClass('selected');
                previouslyselected.next().remove();
                previouslyselected.prev().remove();


                $(this).parent().addClass('selected');

                $(this).parent().before('<li class="sep-left" />');
                $(this).parent().after('<li class="sep-right" />');

                var nestNextLi = $(this).parent('li').next();
                if (nestNextLi != null && nestNextLi.length > 0) {
                    nestNextLi.children('a:first-child').children('span').children('span').css('background-image', 'none');
                }

            }
        }
    });

}
catch (err5) { }

}


</script>

Answer 1

y compris la navigation de cette manière contourne efficacement les mécanismes SharePoint pour mettre en évidence l'onglet en cours afin de pouvoir rouler le vôtre.

Une approche serait d'utiliser jQuery pour itérer via les URL dans la NAV (peut-être ".top_nav li a") et comparer l'URL dans le lien de chaque lien vers la fenêtre actuelle.Location.href pour trouver le meilleur match.Une fois trouvé user .parent (). AddClass ("Sélectionné") pour mettre en surbrillance le parent Li.

Answer 2

Une perspective différente sur celle-ci ... Je dirais que vous devez utiliser le contrôle de la navigation hors de la boîte.Il présente de nombreux avantages tels que des éléments de coupe de sécurité selon les privilèges actuels de l'utilisateur.Vous passerez plus de temps à réparer des bugs avec votre NAV personnalisée que de mettre le dos original. À la fin de la journée, vous devez toujours écrire la jQuery pour effectuer la sélection et le tester, il faudrait le même temps de mettre la même quantité de tempsdans la valeur liquidative d'origine.Aussi laissez-moi vous assurer que vous concevez peut être complètement implémenté à l'aide de la navigation hors de la boîte.