Question

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

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

sharepoint很难定制
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>

Answer 1

我可以感受到您在定制和使用SharePoint时的痛苦。您没有提到HTML所在的位置。我假设您已经通过调整主页（或其他方式）将ul /导航添加到您的页面。

首先，在操作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按钮突出显示导航中的相应元素。

Answer 2

所以我得到了几乎所有的东西，感谢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/，则现在可以识别HR站点。人员/ random_docs。

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

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

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

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

2 个答案: