Comment puis-je appliquer un CSS sélecteur d'ID d'une webpart de la page?

Question

Je suis à l'aide d'un CEWP liés HTML fichier pour générer un menu de liens vers d'autres web-partie pages.Je veux utiliser ce même fichier dans un CEWP sur chacune des pages liées.Comme un indicateur de l'emplacement de l'utilisateur, je veux le style de la page actuelle du lien différemment des autres liens dans le menu.

Ma compréhension est que je peux créer une règle CSS à la définition d'un style de la page du lien à l'aide d'un parent-sélecteur de descendant, c'est à dire, si la page est id="Home" et le lien de class="Home", puis #Home .Home{font-weight:bold;} doit obtenir de moi ce dont j'ai besoin.

Je pense que je doit être en mesure d'attribuer un IDENTIFIANT à un élément parent sur le web-page de sorte que tout le contenu est un "enfant" de l'élément et peut être abordée dans une déclaration.Je me demandais à quel élément sur la page ASPX je doit appliquer un ID.Par ailleurs, Serait-ma page ASPX déjà avoir une ID je peux l'adresse pour le style?

Je me rends compte que j'ai peut-être venir à cette question à partir d'un non sens, et je suis ouvert à d'autres méthodes.En plus, je suis dans une position de prendre une manière incompatible verrouillé installation de la Fondation fais ce que je veux, mais si j'apprends qu'il ya une "meilleure pratique" chemin d'accès à mon but, je peux demander à l'équipe en blouse blanche mettre en œuvre une solution.

Answer 1

Je vous recommande d'éviter d'utiliser des id pour juste le style css, notamment un terme général comme #current.Utiliser une classe à la place: .current-page ou quelque chose comme ça.

SharePoint rend les classes et les id d'un élément de menu actuellement en du côté serveur.Dans votre CEWP vous n'avez pas accès à côté serveur.Une solution possible est d'utiliser un attribut sélecteur jQuery.Supposons que vous avez une enveloppe div dans votre menu avec classe .my-cewp-menu.

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

Ce doit être exécuté lorsque le DOM est chargé.Vous pouvez obtenir l'url actuelle de la page (href) à l'aide de javascript.

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

Ce code est juste un exemple simple.Il ne prend pas possible de la fenêtre.emplacement.dièse (# dans l'url) ou relative de l'url (/sous-site/ma-page.aspx, ou quelques-page.aspx en compte.

Answer 2

Ce n'est plus un général HTML/CSS question (à l'exception du fait que vous utilisez CEWP), cependant, alors que vous êtes encore ici, pourquoi ne pas Exporter le CEWP et il suffit d'utiliser un sélecteur (p. ex.id="current") et de définir avec le style de l'actif, tout en changeant les éléments qui ont le n ° actuel ajouté sur chaque page.

Sur l'autre côté de la barre de navigation en haut de SharePoint (basé sur ASP.NET Menu de contrôle) fait déjà.

Answer 3

Sachez que j'ai choisi Anatoly réponse, et est présenté comme une méthode alternative dans le cas où lesdits est nécessaire...

Ma mise en œuvre de la SP utilise <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"></asp:Content> sur la partie web pages pour entourer le <table> contenant l' <WebPartPages:WebPartZone/> les balises.Je peux cibler le contenu de tout placé dans webparts sur une Webpart de la page (comme mon menu code) par l'ajout de classes et/ou Identifiants à cette table tag:

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

Les éléments de la CEWP contenant mon code de menu sont les enfants de la page ASPX du <table ID="Home"> de l'élément.Par affectation de classes pour chaque lien de menu correspondant à leur page cible, je peux style comme le "courant" lien basé sur le courant de la page ASPX <table> ID.

Un exemple de sélecteur & déclaration, et ont rendu le code source:

À partir de la feuille de style liée dans la page ASPX...

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

À partir de la table sur la page ASPX...

<table id="Home">

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

</table>