adding and removing css classes on href

I have a page with 2 links on it. The page URL is example.com/all

Now the 2 links on the page, one goes to example.com/all/list and the other to example.com/all/map

What I want is when the user lands on example.com/all, 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.

Answers:

Answer

Here's a helper I use in PHP:

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

Then in the page logic:

<?php
$page = 'list';
?>

<a href="example.com/all/list" <?= current_class_if($page=='list') ?>> All </a>
<a href="example.com/all/map"  <?= current_class_if($page=='map') ?>> Map </a>
Answer

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 : example.com/all/list

<a class="current" href="example.com/all/list"> All</a>
<a href="example.com/all/map">Map</a>

page : example.com/all/map

<a href="example.com/all/list"> All</a>
<a class="current" href="example.com/all/map">Map</a>

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.