如何将 CSS ID 选择器应用到 Web 部件页面？

Question

我正在使用 CEWP 链接的 HTML 文件来生成指向其他 Web 部件页面的链接菜单。我想在每个链接页面的 CEWP 中使用相同的文件。作为用户位置的指示器，我想将当前页面的链接设置为与菜单中其他链接不同的样式。

我的理解是，我可以创建一个 CSS 规则，通过使用父后代选择器来定义当前页面链接的样式，即，如果页面的 id="Home" 和链接的 class="Home", ， 然后 #Home .Home{font-weight:bold;} 应该给我我需要的东西。

我想我必须能够将 ID 分配给 Web 部件页面上的父元素，以便其中的所有内容都是该元素的“子元素”，并且可以在声明中进行寻址。我想知道应该向 ASPX 页面上的哪个元素应用 ID。或者，我的 ASPX 页面是否已经有一个可以用于样式设置的 ID？

我意识到我可能会从非常规的方向来解决这个问题，并且我对其他方法持开放态度。此外，我可以让基金会的不一致锁定安装做我想做的事，但如果我了解到有一个“最佳实践”路径可以实现我的目标，我可以要求穿白大褂的团队实施一个解决方案。

Answer 1

我建议避免仅将 id 用于 css 样式，尤其是像这样的通用词 #current. 。使用一个类来代替： .current-page 或类似的东西。

SharePoint 在服务器端呈现当前菜单项的类和 ID。在您的 CEWP 中，您无权访问服务器端。一种可能的解决方案是将属性选择器与 jQuery 结合使用。假设你的菜单中有一个带有 class 的换行 div .my-cewp-menu.

$('.my-cewp-menu').find("a[href='currenHref']").addClass("current-page");

这必须在加载 DOM 时运行。您可以通过 javascript 获取当前页面 url (href)。

(function($) {
    $(document).on({
        ready: function() {
            var href = window.location.href;
            $('.my-cewp-menu').find("a[href='" + href + "']").addClass("current-page")
        }
    });
})(jQuery);

这段代码只是一个简单的例子。它不会考虑可能的 window.location.hash （url 中的 #）或可能的相对 url（/subsite/my-page.aspx 或 some-page.aspx）。

Answer 2

这更像是一个一般的 HTML/CSS 问题（除了您正在使用 CEWP 的事实），但是，当您还在这里时，为什么不导出 CEWP 并简单地使用选择器（例如id="current") 并使用活动元素的样式定义它，同时更改每个页面上添加了 #current 的元素。

另一方面，SharePoint 的顶部导航栏（基于 ASP.NET 菜单控件）已经做到了这一点。

Answer 3

请知道，我选择了阿纳托利的答案，并且仅在需要时作为替代方法提供......

我的 SP 实现使用 <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"></asp:Content> 在 Web 部件页面上围绕 <table> 含有 <WebPartPages:WebPartZone/> 标签。我可以通过添加类和/或 ID 来定位 Web 部件页面上的 Web 部件中放置的所有内容（如我的菜单代码） table 标签：

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
 <table class="Class1 Class2" id="Home">
  <tr><td><WebPartPages:WebPartZone/></td></tr>
 </table>
</asp:Content>

CEWP 中包含我的菜单代码的元素是 ASPX 页面的子元素 <table ID="Home"> 元素。通过为与其目标页面对应的每个菜单链接分配类，我可以根据当前 ASPX 页面的样式将它们设置为“当前”链接 <table> ID。

选择器和声明以及呈现的源代码的示例：

从 ASPX 页面中链接的样式表...

#Home .Home{font-style:italic;}

从 ASPX 页面上的表格...

<table id="Home">

<!--CEWP's HTML-->
    <ul>
     <li>
      <a href="http://website.com" class="Home">Home</a>
     </li>
    </ul>
<!--End CEWP-->

</table>