كيف يمكنني تطبيق محدد معرف CSS على صفحة جزء ويب؟

Question

أستخدم ملف HTML مرتبطًا بـ CEWP لإنشاء قائمة ارتباطات لصفحات أجزاء الويب الأخرى.أريد استخدام هذا الملف نفسه في CEWP على كل صفحة من الصفحات المرتبطة.كمؤشر لموقع المستخدم، أريد تصميم رابط الصفحة الحالية بشكل مختلف عن الروابط الأخرى في القائمة.

ما أفهمه هو أنه يمكنني إنشاء قاعدة CSS تحدد نمطًا لرابط الصفحة الحالية باستخدام محدد الأصل والسليل، على سبيل المثال، إذا كانت الصفحة id="Home" والارتباط class="Home", ، ثم #Home .Home{font-weight:bold;} يجب أن يحصل لي على ما أحتاجه.

أعتقد أنني يجب أن أكون قادرًا على تعيين معرف لعنصر أصلي في صفحة جزء الويب بحيث يكون كل المحتوى الموجود فيه "فرعيًا" للعنصر ويمكن تناوله في إعلان.أتساءل عن العنصر الموجود في صفحة ASPX الذي يجب أن أقوم بتطبيق معرف عليه.وبدلاً من ذلك، هل تحتوي صفحة ASPX الخاصة بي بالفعل على معرف يمكنني معالجته للتصميم؟

أدرك أنني قد أتناول هذه المشكلة من اتجاه غير تقليدي، وأنا منفتح على طرق أخرى.بالإضافة إلى ذلك، أنا في وضع يسمح لي بإجراء تثبيت مقفل بشكل غير متسق للمؤسسة وأفعل ما أريد، ولكن إذا علمت أن هناك مسار "أفضل ممارسة" لتحقيق هدفي، فيمكنني أن أطلب من الفريق ذو المعاطف البيضاء تنفيذ حل .

Answer 1

أوصي بتجنب استخدام المعرف لتصميم CSS فقط، وخاصة الكلمة العامة مثل #current.استخدم فئة بدلاً من ذلك: .current-page أو شيء من هذا القبيل.

يعرض SharePoint الفئات والمعرفات لعنصر القائمة الحالي في جانب الخادم.في CEWP الخاص بك، لا يمكنك الوصول إلى جانب الخادم.أحد الحلول الممكنة هو استخدام محدد السمات مع jQuery.لنفترض أن لديك شعبة التفاف في القائمة الخاصة بك مع الفصل الدراسي .my-cewp-menu.

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

يجب تشغيل هذا عند تحميل DOM.يمكنك الحصول على عنوان 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).

Answer 2

هذا سؤال عام يتعلق بـ HTML/CSS (باستثناء حقيقة أنك تستخدم CEWP)، ومع ذلك، بينما لا تزال هنا، لماذا لا تقوم بتصدير CEWP وببساطة استخدام محدد (على سبيل المثال.id="current") وحدد ذلك باستخدام نمط العنصر النشط، مع تغيير العناصر التي تمت إضافة #current في كل صفحة.

ومن ناحية أخرى، يقوم شريط التنقل العلوي في SharePoint (استنادًا إلى التحكم في قائمة ASP.NET) بذلك بالفعل.

Answer 3

يرجى العلم أنني اخترت إجابة أناتولي، ولم أقدمها إلا كطريقة بديلة في حالة الحاجة إليها...

تطبيقي لاستخدامات SP <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"></asp:Content> على صفحات أجزاء الويب لإحاطة <table> تحتوي على <WebPartPages:WebPartZone/> العلامات.يمكنني استهداف محتوى كل شيء يتم وضعه في أجزاء الويب على صفحة جزء ويب (مثل رمز القائمة الخاص بي) عن طريق إضافة فئات و/أو معرفات إلى هذا 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> بطاقة تعريف.

مثال على المحدد والإعلان وكود المصدر المقدم:

من ورقة الأنماط المرتبطة بصفحة 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>