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

Posted 2021-05-06

所以我的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，它们可以删除）