マスターページのハードコードナビゲーション - アクティブリンクが変更されない

Question

私の到着前に、すべてのナビゲーションがマスターページにハードコードされることを決定しました。私はしっかりした理由を見つけることができればいいのに、しかしそれは私を脱出しています。時間制約のために、マスターページを書き換えることは実際にはオプションではありません。

他のサイト（ホーム、ニュース、about）に移動するとき、アクティブなサイトはナビゲーションには反映されていません。

ここに私が働いているコードです：

<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>  

.

これは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}

.

物事を助けるためのビット

<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

このようにしてナビゲーションを含む現在のタブを強調表示するためのSharePointメカニズムを効果的にバイパスして自分自身を転がす必要があります。

1つのアプローチは、jQueryを使用して、NAV内のURLを繰り返し（おそらく ".top_nav li a"）、各リンク内のURLを現在のwinder.location.hrefに比較して最良の一致を見つけます。使用したら、.parent（）を使用します。親LIを強調表示するためのAddClass（ "selected"）。

Answer 2

これに関する異なる視点...私はあなたがボックスナビゲーションコントロールのうちのOUTを使う必要があると主張します。現在のユーザーの特権に応じて、セキュリティトリミング項目などの多くの利点があります。オリジナルのバックアップを入れるだけでは、カスタムナビゲーションでバグを修正することができます。一日の終わりには、選択してテストするためにjQueryを書く必要があります。元のNAVで。また、あなたがボックスナビゲーションの外出を使って完全に実装できることを確認させてください。