Sharepoint + Jquery,在该页面上添加活动类到导航

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sharepoint + Jquery,在该页面上添加活动类到导航相关的知识,希望对你有一定的参考价值。

所以我的html看起来像这样,我已经加载了jQuery到网站,它是jQuery v3.3.1

现在问题是我无法通过向HTML添加活动标记来显示用户所在的网站。我正在使用自己的菜单,而不是使用sharepoint,因为

  1. sharepoint很难定制
  2. OOTB导航栏不允许超过1级的下拉菜单。

我已经看到其他人完成了使用jQuery添加活动类,但到目前为止复制他们的工作并不适合我:P有人可以给我一些关于如何使用jQuery执行此操作的想法吗?

(自从我使用jQuery已经3年了)

<div id='cssmenu'>
<ul>
   <li><a href='/sites/intra/products'><span>Products</span></a></li>
   <li><a href='/sites/intra/marketing'><span>Marketing</span></a></li>
   <li><a href='/sites/intra/sales'><span>Sales</span></a></li>
   <li><a href='/sites/intra/operations'><span>Operations</span></a></li>
   <li><a href='/sites/intra/it'><span>IT</span></a></li>
   <li class='last'><a href='/sites/intra/management'><span>Management</span></a></li>
</ul>
</div>
答案

我可以感受到你的痛苦定制和与SharePoint合作。你没有提到你的HTML所在的位置。我假设您已经通过调整其母版页(或其他方式)将ul / navigation添加到您的页面。

首先,在操纵DOM之前,你必须等到网站加载完毕。这就是我们在$(document).ready()函数中包含以下内容的原因。

在此函数中,您需要找到要突出显示的相应锚元素。 a标签。您可以使用以下jQuery ID, child, and attribute selector实现此目的,如下所示。

$(function() {
    $('#cssmenu > ul > li > a[href="' + location.pathname + '"]').addClass('active');
});

重要的是,您当前页面的location.pathname与您的href元素中提供的a匹配。否则jQuery找不到该元素,最终没有突出显示。一个警告可能是SitePages/Home.aspx后缀SharePoint自动附加。在这种情况下,您需要拆分location.pathname以使其再次匹配或将提供的href更改为例如/sites/intra/products/SitePages/Home.aspx

你可以找到一个工作的jsfiddle here。点击run按钮突出显示导航中的相应元素。

另一答案

感谢Yannic,我现在几乎得到了一切。

这是我的JS现在的样子:

<script type="text/javascript">
$( document ).ready(function() {
console.log( "ready!" );
var pathname = window.location.pathname.split( '/' );
var site_root = pathname[1];
var site_name = pathname[2];
var site_page = pathname[3];
$('#pathname').text(location.pathname);
$('#cssmenu ul li a[href="' + '/' + site_root + '/' + site_name + '/' + site_page +'"]').addClass('active');
<!--    alert( '/' + site_root + '/' + site_name + '/' + site_page ); -->
});
</script>

这是HTML:

<div id='cssmenu'>
<ul>
<li><a href='/sites/intra'><span>Intra</span></a></li>
<li class='has-sub'><a href='/sites/intra/hr'><span>HR</span></a>

</li>
 <li><a href='/sites/intra/products'><span>Products</span></a></li>
<li><a href='/sites/intra/marketing'><span>Marketing</span></a></li>

</div>

我想问的最后一个问题是,您可以看到我将路径名拆分为三个部分,因此如果URL是例如www.mysharepoint.com/sites/intra/hr/staff/random_docs,则现在可以识别HR站点。 。

但我不得不使用3个第一个路径名来使其工作。然而,内部主页仅为/ sites / intra。我不能使用内部主页的第三个路径名,因为第三个是/ SitePages。如果我在HTML中使用该URL,则会将您带到站点内页面而不是主页。

这是非常小的,我非常感谢你的帮助!因此,如果您不知道一个简单而优雅的解决方案,那么我将创建一个名为Home的新子站点或类似的东西,然后使用它。

我希望这篇文章可以帮助那些可能会遇到同样问题的人。(在JS中有console.log然后是一个警报,这些我只用来检查我的理智:P,它们可以删除)

以上是关于Sharepoint + Jquery,在该页面上添加活动类到导航的主要内容,如果未能解决你的问题,请参考以下文章

在 Sharepoint 上打开新页面时添加弹出窗口

如何在 SharePoint Online 页面布局中引用 Jquery?

Sharepoint 2010 在 jquery/javascript 中捕获 webpart 刷新

如何在 SharePoint WebPart 上使用 jQuery 响应 RadioButton 的更改事件?

所有页面上的 SharePoint 2013 动态数据

非 SharePoint 页面上的资源管理器视图