ما هى الطريقة الصحيحة لتفعيل خاصية active فى قائمة الموقع

في ملف التنسيق سيكون لديك فئة(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 لكل صفحة على حده.

هل عند النقر على الزر يتم تحميل صفحة جديدة أم تبقا في نفس الرابط

بمعنى هل يتم تحديث الصفحة

@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>