Como aplico um seletor de ID CSS a uma página de webpart?

Question

Estou usando um arquivo HTML vinculado ao CEWP para gerar um menu de links para outras páginas da web part.Quero usar esse mesmo arquivo em um CEWP em cada uma das páginas vinculadas.Como um indicador da localização do usuário, quero estilizar o link da página atual de maneira diferente dos outros links do menu.

Meu entendimento é que posso criar uma regra CSS definindo um estilo para o link da página atual usando um seletor pai-descendente, ou seja, se o link da página id="Home" e o link class="Home", então #Home .Home{font-weight:bold;} deveria me dar o que preciso.

Estou pensando que devo ser capaz de atribuir um ID a um elemento pai na página da web part para que todo o conteúdo nele contido seja um "filho" do elemento e possa ser endereçado em uma declaração.Estou me perguntando a qual elemento da página ASPX devo aplicar um ID.Alternativamente, minha página ASPX já teria um ID que eu possa endereçar para estilização?

Sei que posso estar abordando esse assunto de uma direção não convencional e estou aberto a outros métodos.Além disso, estou em posição de fazer com que uma instalação inconsistentemente bloqueada do Foundation faça o que eu quero, mas se eu descobrir que existe um caminho de "melhores práticas" para meu objetivo, posso solicitar que a equipe de jaleco branco implemente uma solução .

Answer 1

Eu recomendaria evitar o uso de id apenas para estilo CSS, especialmente uma palavra geral como #current.Use uma classe em vez disso: .current-page ou algo assim.

O SharePoint renderiza classes e ID para um item de menu atual no lado do servidor.No seu CEWP você não tem acesso ao lado do servidor.Uma solução possível é usar um seletor de atributos com jQuery.Suponha que você tenha uma div wrap em seu menu com classe .my-cewp-menu.

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

Isso deve ser executado quando o DOM for carregado.Você pode obter o URL da página atual (href) por meio de javascript.

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

Este código é apenas um exemplo simples.Não leva em consideração possíveis window.location.hash (# in url) ou possíveis URLs relativos (/subsite/my-page.aspx ou some-page.aspx).

Answer 2

Esta é mais uma questão geral de HTML/CSS (exceto pelo fato de você estar usando o CEWP), no entanto, enquanto você ainda está aqui, por que não exporta o CEWP e simplesmente usa um seletor (por exemplo,id="current") e defina isso com o estilo do ativo, enquanto altera quais dos elementos têm o #current adicionado em cada página.

Por outro lado, a barra de navegação superior do SharePoint (baseada no controle Menu ASP.NET) já faz isso.

Answer 3

Saiba que selecionei a resposta de Anatoly e a forneci apenas como método alternativo, caso seja necessário ...

Minha implementação de SP usa <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"></asp:Content> nas páginas da Webpart para cercar o <table> contendo o <WebPartPages:WebPartZone/> Tag.Posso direcionar o conteúdo de tudo colocado em webparts em uma página de Webpart (como meu código de menu) adicionando classes e/ou IDs a isso table marcação:

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

Os elementos no CEWP que contém meu código de menu são filhos do código da página ASPX <table ID="Home"> elemento.Ao atribuir classes a cada link de menu correspondente à sua página de destino, posso estilizá-los como o link "atual" com base na página ASPX atual. <table> EU IA.

Um exemplo de seletor e declaração e código-fonte renderizado:

Da folha de estilo vinculada na página ASPX...

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

Da tabela na página ASPX...

<table id="Home">

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

</table>