¿Cómo puedo aplicar un CSS selector de ID a un elemento web de la página?

Question

Estoy usando una CEWP ligada archivo HTML para generar un menú de enlaces a otros web-páginas de elementos.Quiero utilizar este mismo archivo en una CEWP en cada una de las páginas enlazadas.Como un indicador de la ubicación del usuario, quiero el estilo de la página actual del vínculo diferente de los otros enlaces en el menú.

Mi entendimiento es que yo puedo crear una regla CSS que definir un estilo para la página actual del enlace mediante el uso de un progenitor-descendiente selector, es decir, si la página id="Home" y el link class="Home", a continuación, #Home .Home{font-weight:bold;} debe conseguir lo que necesita.

Estoy pensando que debe ser capaz de asignar un ID a un elemento primario en la web, la parte de la página así que todo el contenido en ella es un "hijo" del elemento y puede ser dirigida en una declaración.Me pregunto a qué elemento de la página ASPX que debo solicitar un ID.Alternativamente, Sería mi ASPX página ya tiene un ID que puedo dirección por el estilo?

Me doy cuenta de que podría venir a este problema desde una poco convencional de la dirección, y estoy abierto a otros métodos.Además, estoy en una posición de tomar decisiones de forma incoherente bloqueado la instalación de la Fundación hacer lo que quiero, pero si me entero que hay una "mejor práctica" de camino a mi meta, puede solicitar que el equipo de bata blanca implementar una solución.

Answer 1

Recomiendo evitar el uso de id de sólo el estilo css, en particular, una palabra general como #current.El uso de una clase en su lugar: .current-page o algo como eso.

SharePoint hace clases y el id de un elemento de menú actual en el lado del servidor.En su CEWP usted no tiene acceso a lado del servidor.Una posible solución es el uso de un selector de atributo con jQuery.Supongamos que usted tiene una envoltura div en tu menú con clase .my-cewp-menu.

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

Esto tiene que ser ejecutado cuando el DOM está cargado.Usted puede obtener la url de la página actual (href) a través 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 es sólo un ejemplo sencillo.No tome posible de la ventana.ubicación.hash (# en la url) o la posible relación de direcciones url (/subsitio/mi página.aspx, o algunas páginas.aspx) en cuenta.

Answer 2

Esto es más de un general de HTML/CSS pregunta (excepto por el hecho de que usted está usando CEWP), sin embargo, mientras que usted todavía está aquí ¿por qué no Exportar el CEWP y sólo tiene que utilizar un selector (por ejemplo,id="current") y definir que con el estilo del activo, mientras que el cambio de los elementos tienen la #actual agregado en cada página.

En el otro lado de la barra de navegación superior de SharePoint (basado en ASP.NET Menú de control) no esta ya.

Answer 3

Por favor, sepan que he seleccionado Anatoly la respuesta, y sólo se proporciona como un método alternativo en el caso de que es necesario...

La implementación de mi SP usa <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"></asp:Content> en Webpart páginas para rodear el <table> que contiene el <WebPartPages:WebPartZone/> las etiquetas.Me pueden orientar el contenido de todo lo que se coloca en webparts en un elemento web de la página (como mi código de menú) mediante la adición de las clases y/o Identificadores de este table etiqueta:

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

Los elementos en la CEWP que contiene mi código de menú son hijos de la página ASPX del <table ID="Home"> elemento.Mediante la asignación de clases para cada enlace del menú correspondiente a su página de destino, me puede estilo de ellos como el "actual" vínculo basado en la corriente de la página ASPX <table> ID.

Un ejemplo de que el selector de la & declaración, rendida el código fuente:

De la hoja de estilos enlazada en la página ASPX...

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

A partir de la tabla de la 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>