在我到达之前,它决定所有导航都将硬编码到母版页中。我希望我能找到一个坚实的原因为什么,但是因为它逃脱了我。由于时间约束,重写主页并不是一个选择。

我所拥有的问题是在导航到其他网站时(主页,新闻,关于),活动站点未反映在导航中。

这是我正在使用的代码:

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

有帮助吗?

解决方案

以这种方式包括导航,有效地绕过了SharePoint机制,以便突出显示当前标签,以便您必须自己滚动。

一种方法是使用jQuery来迭代导航中的URL(可能是“.top_nav li a”)并将每个链接中的URL与当前窗口进行比较.Location.href以查找最佳匹配。一旦找到了使用.parent()。addclass(“选定”)突出显示父li。

其他提示

对此有不同的透视......我会争辩说你需要用完盒子导航控制。根据当前用户的权限,它具有许多益处,例如安全修剪项目。您将花更多时间使用自定义导航来修复错误而不是刚刚将原始丢弃。在一天结束时,您仍然必须编写jQuery来进行选择并测试它,它会采取相同的时间在原版净资产。另请让我向您保证,您可以使用开箱导航完全实现设计。

许可以下: CC-BY-SA归因
scroll top