adding and removing css classes on href

I have a page with 2 links on it. The page URL is

Now the 2 links on the page, one goes to and the other to

What I want is when the user lands on, class for the href link needs to be 'current' When I click on example/all/map the map link needs to have the class 'current' and the list/all link needs it removing.

When I click on all/list after clicking on all/map, the current class needs to be on the all/list link and removed from the all/map

If that makes sense?

Similar to a toggle.



Here's a helper I use in PHP:

function current_class_if( $condition ) {
  return $condition ? 'class="current"' : '';

Then in the page logic:

$page = 'list';

<a href="" <?= current_class_if($page=='list') ?>> All </a>
<a href=""  <?= current_class_if($page=='map') ?>> Map </a>

this can be done at the server side.

You need to set the current link on the page.

like if you have static html page then this can be done as

page :

<a class="current" href=""> All</a>
<a href="">Map</a>

page :

<a href=""> All</a>
<a class="current" href="">Map</a>

I don't know much about PHP but you can also set this in PHP by checking the current page url.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.