تغيير لون رابط الصفحة الحالية باستخدام CSS

تعد معالجة مظهر رابط الصفحة الحالية أحد متطلبات تصميم CSS الشائعة. ولتمييزه عن روابط الصفحات الأخرى، غالبًا ما يفضل المستخدمون تبديل ألوان النص والخلفية. فيما يلي حل شامل لطلب التصميم الخاص بك:

تصميم CSS

لتصميم رابط الصفحة الحالية، قم بإضافة قواعد CSS التالية إلى ورقة الأنماط الخاصة بك:

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}

jQuery Script

يتيح لك البرنامج النصي jQuery المقدم تحديد رابط الصفحة الحالية وإضافة فئة إليه ديناميكيًا:

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

اعتمادًا على بنية صفحتك المحددة، قد تحتاج إلى تحسين محدد الروابط ($("[href]")). على سبيل المثال، إذا كانت الروابط مضمنة في عنصر التنقل، فيمكنك تضييق نطاق التحديد إلى $("nav [href]").

إذا كانت صفحتك تستخدم معلمات URL، فيمكنك إزالتها قبل مقارنة روابط للتأكد من التعرف على رابط الصفحة الحالية:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

هذا الأسلوب يلغي الحاجة إلى تعديل نمط CSS لكل صفحة على حدة.