تحديث تقليد لقائمة التمييز الثانوية بدون ملفات تعريف الارتباط

يُعد تأثير تمييز القائمة طريقة تصميم تُستخدم غالبًا في كل صفحة ويب، ويمكنها بشكل فعال السماح للمستخدمين بمعرفة العمود الموجود حاليًا. هذه هي الطريقة التي أستخدمها كثيرًا بشكل عام، تحتوي صفحات الويب على مستويين من القوائم على الأقل، الأول هو قائمة شريط التنقل العامة في الأعلى، والآخر هو قائمة التنقل بين الفئات على اليسار. من المطلوب عمومًا أن يتم أيضًا تسجيل الحالة الحالية في قائمة المستوى الثاني عند تمييز قائمة المستوى الأول.

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

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

فهل هناك طريقة أفضل لحل هذا الوضع؟

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

الطبقة الهيكلية

طبقة هيكل القائمة ذات المستوى الأول:

<ul معرف = "القائمة">
<li><a href="default.html">الصفحة الرئيسية</a></li>
<li><a href="clothing.html">مستلزمات الملابس</a></li>
<li><a href="house.html">الأثاث المنزلي</a></li>
<li><a href="cosmetic.html">مستحضرات التجميل</a></li>
</ul>

ويمكن ملاحظة أنه في قائمة المستوى الأول هذه، لا يحتوي عنوان الرابط بشكل عام على قيمة معلمة. الطبقة الهيكلية للقائمة الثانوية:

<ul id="othermenu">
<li><a href="house.html?pId=2&sId=1">الضروريات اليومية</a></li>
<li><a href="house.html?pId=2&sId=2">الأثاث الصغير</a></li>
<li><a href="house.html?pId=2&sId=3">الملحقات الكهربائية</a></li>
<li><a href="house.html?pId=2&sId=4">طقم الفراش</a></li>
<li><a href="house.html?pId=2&sId=5">فراش الزفاف</a></li>
<li><a href="house.html?pId=2&sId=6">مفروشات الأطفال</a></li>
<li><a href="house.html?pId=2&sId=7">الزخارف الحرفية</a></li>
<li><a href="house.html?pId=2&sId=8">أدوات التنظيف</a></li>
<li><a href="house.html?pId=2&sId=9">تنظيف المنزل</a></li>
</ul>

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

طبقة النمط

فيما يتعلق بالنمط، لا يوجد في الواقع أي شيء خاص به، يمكنك ضبطه على النمط الذي تريده. الشيء الوحيد الذي يجب ملاحظته هو أننا بحاجة إلى تعيين أنماط الحالة الثلاثة لتمييز القائمة بشكل منفصل للاستدعاء الديناميكي بواسطة JS. .

/*ثلاثة إعدادات لأنماط قائمة المستوى الأول*/
#menu li a.normal{background:#fff;}// النمط العادي
#menu li a.over{background:#00ff00;} //أسلوب التدحرج
#menu li a.cur{background:#ff0000;color:#fff;} //نمط التمييز
/*ثلاثة إعدادات لأنماط القائمة الثانوية*/
#othermenu li a.normal{background:#fff;} // النمط العادي
#othermenu li a.over{background:#AA7F00;color:#fff;} // نمط التدحرج
#othermenu li a.cur{background:#7F0000;color:#fff;} //نمط التمييز