Tips for updating the corresponding nav link in CSS when transitioning between pages

In order to highlight the current page in the navigation menu, one method is to use an active attribute on the nav-link of the respective page: 

 <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link navLink active" href="userhome.php">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navLink" href="pool.php">Pool</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navLink" href="tickets.php">Tickets</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navLink" href="#">Winners</a>
          </li>
        </ul>

 <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link navLink " href="userhome.php">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navLink active" href="pool.php">Pool</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navLink" href="tickets.php">Tickets</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navLink" href="#">Winners</a>
          </li>
        </ul>

... and so forth

Are there any other options available using JavaScript or CSS?

javascripthtmlcssdombootstrap-4

Answer №1

Would you like to know which page you are currently on in your PHP website? Here's a simple solution that will help you achieve this:

To start, add the following line of code at the top of each of your pages, replacing 'pool' with the respective page name:

<?php $current_page = 'pool' ?>

Next, modify your nav.php file as follows:

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link navLink <?php if ($current_page === 'home') echo 'active'; ?>" href="userhome.php">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link navLink <?php if ($current_page === 'pool') echo 'active'; ?>" href="pool.php">Pool</a>
    </li>
    <li class="nav-item">
        <a class="nav-link navLink <?php if ($current_page === 'tickets') echo 'active'; ?>" href="tickets.php">Tickets</a>
    </li>
    <li class="nav-item">
        <a class="nav-link navLink <?php if ($current_page === 'winners') echo 'active'; ?>" href="#">Winners</a>
    </li>
</ul>

This code snippet checks for the current page using the $current_page variable and adds an 'active' class accordingly.

If you prefer not setting a variable on each page, you can compare the current page URI with the server's response. Here's how:

<?php
    $current_page_uri = str_replace( '/', '', $_SERVER['REQUEST_URI'] );
    $current_file = basename( $_SERVER['PHP_SELF'] );
    $active = ( $current_page_uri === $current_file ) ? 'active' : '';
    ?>

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link navLink <?php echo $active ?>" href="userhome.php">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link navLink <?php echo $active ?>" href="pool.php">Pool</a>
    </li>
    <li class="nav-item">
        <a class="nav-link navLink <?php echo $active ?>" href="tickets.php">Tickets</a>
    </li>
    <li class="nav-item">
        <a class="nav-link navLink <?php echo $active ?>" href="#">Winners</a>
    </li>
</ul>

Answer №2

Using $_SERVER['PHP_SELF'] allows you to retrieve the current file name

This can be useful for matching filenames of links with the current page

You also have the option to add extra classes for custom styling

<?php $current = basename($_SERVER['PHP_SELF']); ?>
 <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link navLink <?php if($current=="username.php") echo " active"; ?>" href="userhome.php">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navLink <?php if($current=="pool.php") echo " active"; ?>" href="pool.php">Pool</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navLink <?php if($current=="tickets.php") echo " active"; ?>" href="tickets.php">Tickets</a>
      </li>
      <li class="nav-item">
        <a class="nav-link navLink <?php if($current=="winners.php") echo " active"; ?>" href="winners.php">Winners</a>
      </li>
    </ul>

I hope this helps clarify things for you! 😊

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Every time a GET request is made to the same route in Express.js, it seems to be stuck in a

Currently, I am working on an express application that requires a landing page to be rendered for the '/' route. This landing page consists of a text box and a submit button. The desired functionality is such that when a user enters some text int ...

javascriptnode.jsexpress

What is the best way to merge a card-deck with fixed-width cards?

Currently, I am using flex-mode and aiming to create a 'deck' of 'cards' with uniform height and width. My goal is to ensure that the width remains consistent across different breakpoints. Unfortunately, I have not been able to achieve ...

cssflexboxbootstrap-4

Find the value of a JavaScript string variable using an alternative name

My latest JavaScript function is designed to fetch JSON data from either a server or local files on any browser. This piece of code processes JSON from two sources: an XMLHttpRequest response, or a variable imported via script. In the case of the latter, ...

javascriptjsonglobal-variablesevalalias

AngularJS is incapable of detaching forms from objects

Creating forms dynamically using ng-repeat and adding them to the vm.forms object is causing issues. When an item is removed from the array, the corresponding form is deleted but the key in the vm.forms object remains, leading to undefined errors. angul ...

javascriptangularjsforms

Toggle visibility with JQuery's onClick event

I am looking for a way to toggle the visibility of text that has display: none; in CSS when a button is clicked, as well as clear the input field on the onClick event. Currently, the text remains visible even after it has been displayed. Any assistance wou ...

jquerycss

Enhancing Dropdown Functionality Using Jquery

Hey there, I am looking to create a dropdown list/menu similar to the one shown in this image: (a screenshot). Could you please guide me on how to achieve this? Can it be done using JQUERY? Thank you in advance, Andrea ...

jquerycssinterfacemenudrop-down-menu

Display icon within ng-bind-html when the value is not true

Is there a way to integrate a fontawesome icon into ng-bind-html on ui-select based on a boolean value? <span ng-bind-html="project.IsActive == false && <i class="fa fa-ban" aria-hidden="true"></i> | highlight: $select.search">& ...

javascriptangularjsfont-awesomeui-selectng-bind-html

Generate JSON on-the-fly with ever-changing keys and values

I am new to coding and I'm attempting to generate JSON data from extracting information from HTML input fields. Can anyone guide me on how to create and access JSON data in the format shown below? { Brazilians**{ John**{ old: 18 } ...

javascripthtmljsonobject

Is there a problem with Chrome's display?

I'm currently using Chrome version 53.0.2785.143 and have noticed a rendering issue that tends to occur more frequently within my application when utilizing CSS transform scale. Feel free to check out this JSFiddle link which demonstrates the problem ...

htmlcssgoogle-chrome

Sending an array encoded in JSON to jQuery

I'm attempting to send an array that I've created in PHP using json_encode(). The process involves running an AJAX request, as shown below: AJAX CALL: $.ajax({ type: "POST", url: "../includes/ajax.php?imagemeta=1", data: ...

javascriptphpjqueryajaxjson

Learn the process of setting a timestamp using this PHP script

I have a script that retrieves data based on selected dates, but I want to modify it to work with timestamps instead. <link rel="stylesheet" type="text/css" href="tcal.css" /> <script type="text/javascript" src="tcal.js"></script> <fo ...

phphtmldatetimestamp

Creating a color icon for StackExchange using HTML

I am currently working on building my personal website. I am looking to include a link to my Stack Exchange profile on my site using the Stack Exchange icon. However, the icons available in Font Awesome are grayscale and not colored like other icons such a ...

htmlcsscolorsiconsstackexchange

Using jQuery to send a GET request to the current page with specified parameters

Within my application, hosted on a PHP page, I am aiming to trigger a GET request upon selecting an option from a dropdown menu. The URL of the page is: www.mydomain.it/admin/gest-prenotazioni-piazzola.php I intend to utilize jQuery to execute this GET r ...

javascriptphpjqueryget

What are the best practices for handling dynamic content internationalization in Angular?

According to Angular.io, the i18n tag is used to mark translatable content. It should be placed on every element tag that requires translation of fixed text. Now, what if we have an element with dynamic content? For example, consider a table displaying a ...

javascriptangulartypescriptinternationalizationangular-i18n

The function causes changes to an object parameter once it has been executed

I've encountered an issue with a function that is supposed to generate a string value from an object argument. When I call this function and then try to use the argument in another function, it seems to be getting changed somehow. Here is the code fo ...

javascriptnode.jstypescriptexpress

Slowly revealing sticky navigation with slideDown animation using JQuery

Here is the code for a .JS file: $(document).scroll(function (){ var menuheight= $('header').height(); var y = $(this).scrollTop(); if (y>(menuheight)) { $('.menu_nav_features').addClass ...

javascriptjqueryhtmlcssless

Summon wicket from the non-wicket-component entity

I am currently utilizing js-lib to transform text into a rich-editor, complete with options such as "bold", "italic" and more. The RichEditor also includes an UploadImage button, for which I am able to modify the call-back function: function startUploadi ...

javajavascriptajaxwicket

Two conflicting jQuery plugins are causing issues

In my journey to learn jQuery, I encountered an issue while working on a website that utilizes a scroll function for navigating between pages. The scripts used in this functionality are as follows: <script type="text/javascript" src="js/jquery-1.3.1.mi ...

javascriptjqueryscrollshadowbox

The data from the Flickr API is consistently unchanging

I created a simple weather app that retrieves weather data using a "POST" request and displays it successfully. Users have the ability to search for weather by city, and I wanted to enhance the app by loading an image of that city through a separate jQuer ...

javascriptjqueryajaxapi

What is the best way to verify the presence of a value in an SQL column?

I need to check if a value exists in a column. If the value already exists, I do not want to insert it into the table. However, if it does not exist, then I want to add new data. Unfortunately, my attempted solution hasn't been successful. You can fi ...

javascriptmysqlnode.jstypescript