ما هي الطريقة الأكثر فاعلية لإعطاء عنصر قائمة القائمة النشط معرف "محدد" لتغيير CSS؟
https://stackoverflow.com/questions/430648
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
دعنا نقول أن لدي 5 صفحات: A و B و C و D و E. لدي أيضًا قائمة أفقية ، ولكل عنصر خلفية رمادية فاتحة.
يحتوي كل عنصر من عناصر القائمة على: تحوم تمنحه خلفية متوسطة الرمادية ، لكنني أريد أن يكون للصفحة النشطة خلفية سوداء ، لذلك أحدد
#black {
background-color: #000;
}
الآن عندما يكون المستخدم على B.PhP ، أريد أن يحمل عنصر القائمة B #معرف #Black. ما هي أفضل طريقة للقيام بذلك؟
المحلول
اقتراح؛ لا تحدد ماهية أسلوبك "، حدد ما يفعله أسلوبك". لا تسميها #Black ، بدلاً من ذلك ، اتصل بها.
شيء آخر يجب ملاحظته هو أن المعرف مخصص لتحديد عناصر فريدة (#Header ، #Footer ، #Main ، #Sidebar ، #Navbar ، إلخ). يجب أن يتم تحديد عنصر قابل للتكرار كتيار مع فئة ، حيث يمكن أن يكون لديك فئات متعددة مرتبطة بعنصر ، ولكن معرف واحد فقط. مرة أخرى ، تم حجز هذا المعرف لتسمية فريدة من نوعها.
.current
{
background-color: #000;
}
لربط ذلك بصفحة ، يمكنك تعيين متغير على الصفحة يشير إلى الصفحة التي يتم تشغيلها ، ثم استخدم حالة IF ، أو حالة التبديل ، لإضافة النمط إلى العنصر الذي يتعلق بالصفحة الحالية:
(رمز الزائفة ، بناء جملة PHP الخاص بي صدئ)
$current_page = "B"
// -- snip --
<ul>
<li id="navigation-a" <? if ($current_page == "A") { ?> class="current" <? } ?> >Page A</li>
<li id="navigation-b" <? if ($current_page == "B") { ?> class="current" <? } ?> >Page B</li>
</ul>
اختياريا يمكنك محاولة اشتقاق $ current_page من عنوان URL للصفحة في الطلب.
نصائح أخرى
عندما أتمكن من استخدام PHP لمشروع (لا يتم تشغيله بواسطة CMS) ، عادةً ما أستخدم صفيف PHP لبناء القائمة (القائمة). من السهل جدًا إضافة الصفحات أو نقلها أو حذفها من صفيف ، ومن خلال السماح لـ PHP بإخراج هذا كقائمة حقيقية ، لا يتعين عليك إعادة كتابة نفس الرمز مرارًا وتكرارًا.
لتحديد الصفحة التي يجب اعتبارها نشطة ، يمكنك استخدام رمز مشابه لهذا:
$currentPage = "b.php";
لاحظ أنني أستخدم اسم ملف كامل عن الغرض. سأشرح في شيء قصير لماذا.
نظرًا لأن كل عنصر قائمة يتطلب متغيرين على الأقل (الاسم ، URL) ، أستخدم صفيفًا داخل صفيف القائمة لكل إدخال. مثال:
$menu = array(array("a.php", "A Title"), array("b.php", "B Title"), array("c.php", "C Title"));
الآن ، من أجل السماح لـ PHP بأنها سحر ، أستخدم حلقة foreach التي تمر عبر كل عنصر ويعرضها بأي طريقة أريدها.
foreach($menu as $num => $options){
$s = ((isset($activePage) && $options[0] == $activePage) OR ($options[0] == basename($_SERVER['PHP_SELF'])) ? " class=\"active\"" : "";
echo "\n\t<li{$s}><a href=\"" . $options[0] . "\">" . $options[1] . "</a></li>";
}
يمكنك توسيع هذا المفهوم لتضمين الأهداف ، وعلامات العنوان ، إلخ.
جمال بهذه الطريقة هو أنه ليس عليك كتابة كل هذا لكل مشروع. يمكنك فقط نسخ/لصق كل شيء ، وتغيير البتات الصغيرة في صفيف القائمة $ ، وإذا لزم الأمر (أي لعناصر القائمة الفرعية) حدد $ currentpage. إذا لم يتم تحديد page $ current ، فسوف يعود إلى التحقق من الصفحة الحالية (من خلال $ _server ['php_self']) وإعداد الحالة النشطة على ذلك.
آمل أن أشرح ذلك جيدًا بما فيه الكفاية ، وأنه جيد بما يكفي لاستخدامه!
(إخلاء صغير ، أنا فقط استيقظت وكتب هذا الرمز من الصفر. بينما يعمل المفهوم - لقد كنت أستخدمه لسنوات - ، ربما صنعت خطأً مطبعيًا هنا وهناك. الاعتذار إذا كان هذا هو الحال!)
يمكنك تعيين فئة أو معرف إلى <body> العنصر المتعلق بماهية الصفحة الحالية. ثم قم بتصميم التنقل المحلي لكل صفحة وما إلى ذلك باستخدام هذا. امنح كل عنصر قائمة التنقل فئة تتعلق بما يشير إليه الرابط.
بمعنى آخر.
ul.navigation a:link, ul.navigation a:visited {background-color:#eee}
ul.navigation a:active, ul.navigation a:hover, ul.navigation a:focus {background-color:#ccc}
body.about-us .navigation li.about-us-link a:link, body.about-us .navigation li.about-us-link a:visited {background-color:#000}
