السلام عليكم..
أرجو أن أكون قد أصبت فى ذكر اسم الخاصية، وفضلاً أقرأ الوصف لكى تحدد هل اخطأت أم لا.
واجهتنى مشكلة أثناء عملى على قالب وهى جعل تبويبات القائمة فى الهيدر تظهر بلون مختلف عند إختيار إحداها والصور التالية توضح المقصد من كلامى:
فى تلك الصورة القائمة تبدو عادية ولم أقم بعد بإختيار أى تبويب منها.
وفى تلك الصورة تظهر التبويبة التى اختارتها بلون مختلف، وهى المشكلة التى أواجهها.
○ ملخص تساؤلى هو أننى اريد كلما انتقلت لتبويب معين يظهر هذا التبويب بلون يوضح للزائر تواجده فى ذاك القسم.
○ شكراً لك لقراءة تساؤلى، وأتمنى إن كنت تعرف الإجابة أن تمدنى بها ولك جزيل الشكر.
التعليقات
في ملف التنسيق سيكون لديك فئة(class) باسم active وبها الخصائص التي تريد تطبيقها
ويُمكن تنفيذ المطلوب بأكثر من طريقة الأولى باستخدام لغة الخادم ولتكن php سيكون الكود المسئول:
<ul id="topMenu">
<li class="<?php echo ($page == 'page1')?'active':''; ?>">page1</li>
<li class="<?php echo ($page == 'page2')?'active':''; ?>">page2</li>
<li class="<?php echo ($page == 'page3')?'active':''; ?>">page3</li>
<li class="<?php echo ($page == 'page4')?'active':''; ?>">page4</li>
<li class="<?php echo ($page == 'page5')?'active':''; ?>">page5</li>
</ul>
ويمكن استخدام لغة javaScript كالتالي:
$(function(){
$('#topMenu li').click(function(){
$('#topMenu li').removeClass('active');
$(this).addClass('active');
});
});
- ملحوظة: تم استخدام مكتبة jQuery في الكود السابق.
إن كنت تعمل على صفحات HTML ثابتة ستقوم بإضافة الفئة active لكل صفحة على حده.
شكراً لك أولاً على الإجابة، أما ثانياً فهل الكود الأول الذى ذكرته (PHP) إذا قمت بتضمينه بنفس الطريقة على تبويبات القائمة فإن إختيارى لتبويبة ف كل مرة سيجعل تلك التيويبة تظهر بلون محدد ...
مثلاً أنا أريد أن يظهر للزائر لون (أزرق غامق) للتبويبة التى أختارها فكلما أنتقل من تبويبة لأخرى ظهر اللون الأزرق الغامق فى تلك التبويبة وإختفاءه من الأخرى وهكذا، أرجو أن تكون كلماتى غير غامضة حتى تستطيع أفادتى أكثر.
○ علماً بأنى أعمل على قالب بصفحات ثابتة تم تحويله إلى ووردبريس.
الكود عبارة عن شرح للفكرة ستُغيره على حسب حاجتك ولكن بنفس الفكرة، الكود خاص باللغة PHP والمُتغير page$ هو عبارة عن اسم الصفحة أو مُعرف الصفحة التي تريد تحديدها كـ active فيقوم الكود في كل مرة بتحديد الصفحة الحالية لتطبيق التنسيق عليها.
نعم يُمكن تطبيق ما تريد سواء تغيير لون الخلفية للتبويب الفعال أو أي شيء أخر كالتالي:
#topMenu li.active{
background-color: #00F;
}
نعم الصفحة يتم تحديثها مع كل ضغطة زر، ويمكنك قراءة تعليقى بالأعلى وستجد توضيح أكثر لما اريد شكراً لك على اهتمامك هذا :).
في الصفحة التي يؤدي إليها الزر الأول
تضع id مميز للزر الأول فقط
وفي css
#button1 {
/* كود css للزر المضغوط */
}
بمعنى أننى أضع لكل زر id مميز خاص به واقوم بتطبيق الخاصية عليه من خلال كود الـ css ، هل هذا ما قصدته أم أننى أسئت الفهم.
- هو يقصد أنك تستخدم صفحات ثابتة static وبالتالي تستطيع تحديد الصفحة الفعال داخل كل صفحة على حدة كمثال:
لديك صفحات HTML وهي home و about و help و ...
التنسيق سيكون:
.active{
background-color: #00F;
}
داخل الصفحة home.html سيتواجد الكود:
<ul id="topMenu">
<li class="active"><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="help.html">Help</a></li>
<li>...</li>
</ul>
وداخل الصفحة about.html سيتواجد الكود:
<ul id="topMenu">
<li><a href="home.html">Home</a></li>
<li class="active"><a href="about.html">About</a></li>
<li><a href="help.html">Help</a></li>
<li>...</li>
</ul>
وداخل الصفحة help.html سيتواجد الكود:
<ul id="topMenu">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="active"><a href="help.html">Help</a></li>
<li>...</li>
</ul>
وهكذا ...
أى أنه إذا كانت الصفحات ثابتة فعلى بالطريق التى ذكرتها وقد فهمت تلك الطريقة، لكن إذا كانت الصفحات ديناميك ما هى الطريقة الأفضل لفعل الأمر هذا
طيب دعنى أخبرك أكثر عن الكود الذى أستعمله وأريد التطبيق عليه، الكود التالى مضمن فى صفحة الـ header.php ومُستدعى فى كل صفحات القالب أى الـ index.php ، الكود كالتالى:
<?php wp_nav_menu(array(
'theme_location'=>'main-menu',
'container'=>false,
'menu_class'=>'nav navbar-nav'
));?>
</div>
@ahmedsaoud31 أعتذر عن إشغالك مرة أخرى ولكن أردت أن تلقى نظرة على الكود الذى أطبق عليه:
<section class="navigation">
<nav class="navbar navbar-default custom-navbar wow fadeInDown" role="navigation" data-wow-duration="2s" data-wow-offset="60">
<div class="container">
<div class="navbar-header">
<button type="buttton" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#win">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="win">
<?php wp_nav_menu(array(
'theme_location'=>'main-menu',
'container'=>false,
'menu_class'=>'nav navbar-nav'
));?>
</div>
</div>
</nav>
</section>