Жесткая кодированная навигация на главной странице - активная ссылка не меняется

Question

До моего прибытия было решено, что вся навигация будет жестко закодирована на главную страницу.Хотел бы я найти солидную причину, почему, но на данный момент это убегает меня.Благодаря ограничениям времени, перезаписи главная страница на самом деле не является опцией.

Проблема у меня есть при навигации на другие сайты (домой, новости, около), активный сайт не отражается в навигации.

Вот код, с которым я работаю:

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

.

немного JavaScript, чтобы помочь вещам вместе

<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 для выделения текущей вкладки, поэтому вам придется катиться.

Один подход будет использовать jQuery для переадресации через URL-адреса в NAV (возможно, «.top_nav li a») и сравните URL в каждой ссылке на текущее окно.location.href, чтобы найти лучшее совпадение.После нашли использование .parent (). AddClass («выбрано»), чтобы выделить родитель Li.

Answer 2

Другая перспектива на этом ... Я бы утвердовал, что вам нужно использовать из коробки навигационного управления.Он имеет много преимуществ, таких как элементы обрезки безопасности в соответствии с привилегиями текущего пользователя.Вы будете тратить больше времени исправления ошибок с вашим пользовательским навиганием, чем просто положить оригинал обратно. В конце дня вы все еще должны написать jQuery, чтобы сделать выбор и тестировать его, это займет такое же количество временив оригинальном навигателе.Также позвольте мне заверить вас, что ваш дизайн может быть полностью реализован с использованием из коробки навигации.