إذا كان لدي ملف واحد nav_bar.html يتم تضمينه في صفحات أخرى ، فكيف أعرض عنصر القائمة النشط؟

StackOverflow https://stackoverflow.com/questions/3481691

سؤال

شكرا لأخذ الوقت لقراءة هذا.

لديّ شريط تنقل JavaScript (jQuery) على صفحتي الرئيسية ببساطة "مدرجة" على صفحتي. على سبيل المثال ، لدي index.shtml الذي يتضمن "شريط NAV ، وهو" nav_bar.shtml ". وهذا هو نفسه لكل صفحة أخرى. الآن بوضوح ، مع الإعداد الحالي ، لا توجد طريقة لإظهار المستخدم الذي يتم تحديد عنصر القائمة حاليًا لأن صفحة nav_bar.shtml تبقى ثابتة.

ما أرغب في القيام به هو لا يزال لديه ملف nav_bar.shtml واحد فقط ، ولكن كن قادرًا على ، على الصفحات الفردية ، إظهار المستخدم عنصر القائمة الحالي المحدد على شريط NAV (كما هو الحال في ظلال مختلفة من اللون ، إلخ .). إذا بقي nav_bar.shtml ثابتًا ، فليس هناك طريقة واضحة للغاية للقيام بذلك. هل هناك حل بديل لهذا إذا كنت لا أرغب في إنشاء إنشاء شريط جافا سكريبت جديد تمامًا على كل صفحة؟ أم أن كل صفحة تحتاج إلى نسختها الخاصة من رمز NAV_BAR الخاص بتلك الصفحة بحيث تعرف العنصر الذي يحتاج إلى الظل؟

هل كانت مفيدة؟

المحلول

طريقة واحدة للقيام بذلك هي كتابة بعض التعليمات البرمجية للبحث في قائمتك ، والعثور على hrefS من الروابط فيها ، وقارنها بالتيار window.location.pathname. إذا كان لديك عناوين URL نظيفة لطيفة ، فهذا ليس صعبًا جدًا. إذا كان لديك عناوين URL طويلة ومعقدة ، فقد لا تكون عملية.

لذا ، ها هي الفكرة العامة:

$(document).ready( function(){
  var thispage = location.pathname.substring(1);
  $('#menu li a[href~="' + thispage + '"]') // ~= is contains. Tweak as needed.
    .addClass('active');
});

على افتراض أن قائمتك تبدو مثل هذا:

<ul id="menu">
  <li><a href="page1.html">This</a></li>
  <li><a href="page2.html">That</a></li>
  <li><a href="page3.html">The Other</a></li>
</ul>

وبالطبع:

li.active {
    background-color: yellow;
}

نصائح أخرى

لا أعرف ما إذا كان هذا هو الإجابة التي تبحث عنها. لكنك لا تحتاج إلى أي JavaScript لتظليل عنصر معين في صفحة معينة.

يمكنك دائمًا الاستفادة من محددات CSS ، على سبيل المثال:

<body id="homepage">
   <ul id="tabs">
     <li id="tab-homepage"><a href="...">homepage</a></li>
     <li id="tab-news"><a href="...">news</a></li>
     ...

في CSS الخاص بك يمكنك قول شيء مثل:

#homepage #tab-homepage { background-color: red }
#newspage #tab-news { background-color: blue }

لذلك ، أخيرًا ، سيكون عليك فقط تغيير سمة "ID" لعنصر الجسم للحصول على عناصر القائمة المظللة.

على أي حال ، إذا كنت تستخدم jQuery ، يمكنك دائمًا استخدام شيء مثل:

$('body').attr('id', '...');

يمكنك محاولة اكتشاف الصفحة التي يستخدمها المستخدم حاليًا من خلال استخدامها window.location.pathname, وتظليل عنصر القائمة ذات الصلة بناءً على هذا.

مثال:

function shadeMenuItem(item){
    //Your code to style the given element here
}
$(document).ready(function() {
    if(window.location.pathname.match(/^\/questions.*/)){
        shadeMenuItem($('#questions'));  //shade menu item 'questions'
    }
    else if(window.location.pathname.match(/^\/users.*/)){
        shadeMenuItem($('#users'));  //shade menu item 'users'
    }
});

إذا تم تنفيذ هذا الرمز في هذه الصفحة ، فسيتم مطابقة الشرط الأول ، مما يعني ذلك shadeMenuItem() سيكون له العنصر مع #questions مرت عليه.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top