웹 파트 페이지에 CSS ID 선택기를 어떻게 적용합니까?

sharepoint.stackexchange https://sharepoint.stackexchange.com//questions/57563

문제

CEWP에 연결된 HTML 파일을 사용하여 다른 웹 파트 페이지에 대한 링크 메뉴를 생성하고 있습니다.연결된 각 페이지의 CEWP에서 동일한 파일을 사용하고 싶습니다.사용자 위치를 표시하기 위해 현재 페이지의 링크 스타일을 메뉴의 다른 링크와 다르게 지정하고 싶습니다.

제가 이해한 바에 따르면, 상위-하위 선택기를 사용하여 현재 페이지 링크의 스타일을 정의하는 CSS 규칙을 만들 수 있습니다. 즉, 페이지의 링크가 id="Home" 그리고 링크의 class="Home", 그 다음에 #Home .Home{font-weight:bold;} 나에게 필요한 것을 가져와야합니다.

웹 파트 페이지의 상위 요소에 ID를 할당할 수 있어야 그 안의 모든 콘텐츠가 요소의 "하위"가 되고 선언에서 그렇게 처리될 수 있어야 한다고 생각합니다.ASPX 페이지의 어떤 요소에 ID를 적용해야 하는지 궁금합니다.또는 내 ASPX 페이지에 스타일 지정을 위해 처리할 수 있는 ID가 이미 있습니까?

나는 이 문제를 색다른 방향에서 접근할 수도 있다는 것을 알고 있으며 다른 방법도 열려 있습니다.또한, 저는 일관되지 않게 잠긴 Foundation 설치를 제가 원하는 대로 할 수 있는 위치에 있지만, 제 목표에 대한 "모범 사례" 경로가 있다는 것을 알게 되면 백의를 입은 팀에 솔루션 구현을 요청할 수 있습니다. .

도움이 되었습니까?

해결책

CSS 스타일, 특히 다음과 같은 일반적인 단어에는 id를 사용하지 않는 것이 좋습니다. #current.대신 클래스를 사용하세요. .current-page 또는 그런 것.

SharePoint는 서버 측의 현재 메뉴 항목에 대한 클래스와 ID를 렌더링합니다.CEWP에서는 서버 측에 액세스할 수 없습니다.가능한 해결책 중 하나는 jQuery와 함께 속성 선택기를 사용하는 것입니다.메뉴에 클래스가 포함된 랩 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)을 고려하지 않습니다.

다른 팁

이것은 일반적인 HTML/CSS 질문에 가깝습니다(CEWP를 사용하고 있다는 사실 제외). 아직 여기에 있는 동안 CEWP를 내보내고 선택기(예:id="current")를 활성화하고 활성 스타일에 대한 스타일로 이를 정의하는 동시에 각 페이지에 #current가 추가된 요소를 변경합니다.

반면에 SharePoint의 상단 탐색 모음(ASP.NET 메뉴 컨트롤 기반)에서는 이미 이 작업을 수행합니다.

저는 Anatoly의 답변을 선택했으며 필요한 경우 대체 방법으로만 제공했습니다.

내 SP 사용 구현 <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"></asp:Content> Webpart 페이지에서 <table> 함유하는 <WebPartPages:WebPartZone/> 태그.여기에 클래스 및/또는 ID를 추가하여 웹파트 페이지(내 메뉴 코드 등)의 웹파트에 배치된 모든 콘텐츠의 대상을 지정할 수 있습니다. 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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 sharepoint.stackexchange
scroll top