Question 41598 in PHP Question posted in
Official manual can be found here.

Active menu background is not showing after reload – PHP

I have created 2 menus called "Habit Setting" and "Team Setting" enter image description here

But after clicking on second menu the page is reloading and the menu background is not going to second menu. There is always showing menu background of the first menu. Would like to have a better solution for that.

Here is my code –

<?php
  defined('ABSPATH') or exit;

  // TODO: Refactor tabs
?>

<div id="myDIV">
<nav class="bp-navs bp-subnavs no-ajax user-subnav" id="subnav" role="navigation" aria-label="Sub Menu">
<ul class="subnav">

    <li class="bp-personal-sub-tab current selected">
        <a href="<?php echo site_url('settings/habit-settings/'); ?>" class="btn active"> Habit Setting </a>
    </li>
    
    <li class="bp-personal-sub-tab current">
        <a href="<?php echo site_url('settings/team-settings/'); ?>" class="btn"> Team Setting </a>
    </li>


</ul>
</nav>
</div><!-- .item-list-tabs#subnav -->


<!--  Add active class to the current list -->

<style>

.btn {
  outline: none !important;
  cursor: pointer !important;
}

.active, .btn:hover {
  background-color: red !important;
  color: red;
}

</style>

<script>
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
</script>

I was trying to show active menu color through JS but my code doesn’t work.

Tags:

2

Answers


  1. 0

    Why

    This is because javascript does not save element state between pages.

    Solution

    I recommend using the same page to "include" another page.

    First, create a page for routing, add the code:

    <div id="myDIV">
    <nav class="bp-navs bp-subnavs no-ajax user-subnav" id="subnav" role="navigation" aria-label="Sub Menu">
        <ul class="subnav">

            <li class="bp-personal-sub-tab current selected">
                <a href="?page=habit-settings" class="btn" id="habit-settings"> Habit Setting </a>
            </li>

            <li class="bp-personal-sub-tab current">
                <a href="?page=team-settings" class="btn" id="team-settings"> Team Setting </a>
            </li>
        </ul>
    </nav>
</div><!-- .item-list-tabs#subnav -->

    The difference from what you wrote is to change the url to "?page=habit-settings" and "?page=team-settings".

    So when you click the link, you will send the parameter "page" to the current page through the get method.

    Then get the parameter, add the following code:

    <?php
$pageTable = [
    'habit-settings' => 'settings/habit-settings.php',
    'team-settings' => 'settings/team-settings.php',
];
$pageTable['default'] = $pageTable['habit-settings'];

$currentPage = isset($_GET['page']) ? $_GET['page'] : 'habit-settings';

if(isset($pageTable[$currentPage])){
    include($pageTable[$currentPage]);
}else{ include($pageTable['default']); }
?>

    $currentPage = isset($_GET['page']) ? $_GET['page'] : 'default'; means that if got the parameter "page", then set $currentPage to it, otherwise set to the "default".

    The $pageTable means that the file path corresponding to the page name, for example, the page name "habit-settings" corresponds to the file "settings/habit-settings.php". And set the default page to it "$pageTable['default'] = $pageTable['habit-settings']".

    Check if page name is not in the page table: !isset($pageTable[$currentPage]), if not, change the $currentPage to "default".

    Then include the page: include($pageTable[$currentPage])

    Now you can change page through click the links.

    You want to highlight the link corresponding to the current page, so add the js code:

    <script>
    var header = document.getElementById("myDIV");
    var btns = header.getElementsByClassName("btn");
    var currentPage = "<?php echo isset($_GET['page']) ? htmlentities($_GET['page']) : 'habit-settings'; ?>";

    for (var i = 0; i < btns.length; i++) {
        if (btns[i].id !== currentPage) continue;
        btns[i].className += " active";
    }
</script>

    Create the variable "currentPage" to save the PHP variable $currentPage.
    And find the btn element which id same as current page name, if not equal, "continue" the for loop, else add its class name "active".

    Done

    enter image description here

    Full code

    
<div id="myDIV">
    <nav class="bp-navs bp-subnavs no-ajax user-subnav" id="subnav" role="navigation" aria-label="Sub Menu">
        <ul class="subnav">

            <li class="bp-personal-sub-tab current selected">
                <a href="?page=habit-settings" class="btn" id="habit-settings"> Habit Setting </a>
            </li>
            
            <li class="bp-personal-sub-tab current">
                <a href="?page=team-settings" class="btn" id="team-settings"> Team Setting </a>
            </li>
        </ul>
    </nav>
</div><!-- .item-list-tabs#subnav -->

<?php
$pageTable = [
    'habit-settings' => 'settings/habit-settings.php',
    'team-settings' => 'settings/team-settings.php',
];
$pageTable['default'] = $pageTable['habit-settings'];

$currentPage = isset($_GET['page']) ? $_GET['page'] : 'default';

if(isset($pageTable[$currentPage])){
    include($pageTable[$currentPage]);
}else{ include($pageTable['default']); }
?>


<!--  Add active class to the current list -->
<style>
    .btn {
        outline: none !important;
        cursor: pointer !important;
    }

    .active, .btn:hover {
        background-color: red !important;
    }
</style>

<script>
    var header = document.getElementById("myDIV");
    var btns = header.getElementsByClassName("btn");
    var currentPage = "<?php echo isset($_GET['page']) ? htmlentities($_GET['page']) : 'habit-settings'; ?>";

    for (var i = 0; i < btns.length; i++) {
        if (btns[i].id !== currentPage) continue;
        btns[i].className += " active";
    }
</script>
    Login or Signup to reply.
  2. 0

    You could check the path of your href attributes in your navigation against the requested URL with if ($path === 'YOUR-HREF -STRING') { echo 'active';} ?>"

    $path you get with $path = parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); –> see this answer

    Additionally info: the $path variable always starts with a /.

    <?php $path = parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
<ul class="subnav">
    <li class="bp-personal-sub-tab current selected">
        <a href="<?php echo site_url('settings/habit-settings/'); ?>" class="btn <?php if ($path === '/settings/habit-settings/') { echo 'active';} ?>"> Habit Setting </a>
    </li>
    
    <li class="bp-personal-sub-tab current">
        <a href="<?php echo site_url('settings/team-settings/'); ?>" class="btn <?php if ($path === '/settings/team-settings/') { echo 'active';} ?>"> Team Setting </a>
    </li>

</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search