تصف هذه المقالة طريقة JavaScript لتنفيذ تنشيط تنقل الصفحة الحالي. شاركه للرجوع إليه. التفاصيل كما يلي:
جزء HTML (الملاحة المرجعية ، غير متوفر # بدلاً من الروابط ، يمكن أن ينشئ الاختبار عدة صفحات ثابتة جديدة)
<ul id = "nav"> <li> <a href = "/"> home </a> </li> <li> <a href = "/category/html-css/"> html/css </a> </li> <li> <li> href = "/category/seo/"> seo </a> </li> <li> <a href = "/category/front-end/"> أخبار الواجهة الأمامية </a> </li> </ul>
جزء JavaScript (حدد التنقل في الصفحة الحالية مع إضافة فئة .on)
$ (function () {var a1 = document.url ؛ var a2 = $ ("#nav a") ؛ for (var i = 0 ؛ i <a2.length ؛ i ++) {if (a1.indexof ($ (a2 [i]). attr ("href")! = -1)) {$ (a2 [i]). parent (). addClass ("on") ؛ return ؛}} $ (a2 [0]). parent (). addClass ("on") ؛})جزء CSS (يمكن إجراء التعديلات ذات الصلة وفقًا لاحتياجاتك)
#nav li {display: inline block ؛ float: left ؛ text-align: center ؛ height: 36px ؛ padding-left: 4px ؛ line-height: 36px ؛ background: url (Images/nav.gif) no repeat bottom ؛ li.on {font-weight: bold ؛ الخلفية: url (الصور/nav.gif) no-repeat 0 0 ؛ margin-left: -3px ؛}#nav li.on a {background: url (صور/nav.gif) لا يكرر اليمين 0 ؛}آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.