웹 파트 페이지에 CSS ID 선택기를 어떻게 적용합니까?
-
10-12-2019 - |
문제
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>