母版页中的硬编码导航 - 活动链接未更改
-
09-12-2019 - |
题
在我到达之前,它决定所有导航都将硬编码到母版页中。我希望我能找到一个坚实的原因为什么,但是因为它逃脱了我。由于时间约束,重写主页并不是一个选择。
我所拥有的问题是在导航到其他网站时(主页,新闻,关于),活动站点未反映在导航中。
这是我正在使用的代码:
<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来进行选择并测试它,它会采取相同的时间在原版净资产。另请让我向您保证,您可以使用开箱导航完全实现设计。