Add class based on dynamical url parameter (click and load)

Question

I have a php script that allows me to dynamically load content on my page based on the url paramter. Also, I have .htaccess set up so the query string prefix is hidden, meaning they look like example.com/games/demons-souls/[?page=]mods.

[?page=] is hidden via .htaccess. So far, so good.

Now I wanted to show which page is active in a tabpanel, where the active tab is let’s say black. So I’d need to activate the class tab.current. And to do this I need to somehow make my code recognize which url paramter is loaded and dynamically add the .current class to the appropriate tab. I hope I could explain it well enough.

I haven’t got the slightest idea how to accomplish this.

Please help.

Edit 1: Here’s an image of what I’d like to achieve:

Edit 2: As requested here’s the HTML code:


    Spiel
    Releases
    Merchandise
    Guides
    Emulation
    Mods
    Savegame

user_8500718 · Answer

I'm not sure if this is what you are looking for but you can try the following code:

This is code should run at the top, before your nav links.

$url = htmlspecialchars($_SERVER['REQUEST_URI'],ENT_QUOTES,'UTF-8'); //this will give you something like: 'localhost/games/demons-souls/savegame'
$urlParts = explode('/',$url); //then separate string into an array by the forwardslash
$current = $urlParts[count($urlParts)-1]; //this line gets you the current page... in this case will be 'savegame'

The next step should be applied to your nav links:


    Spiel
    Releases
    Merchandise
    Guides
    Emulation
    Mods
    Savegame

Here's what happens in the past code. I used ternary operator to check the name of the $url variable and if it match the href value a .current class will be added.

Or try use the JS hack.

After getting your $current in PHP have an HTML input like this:

The input above will have the value of $current and therefore this value can be used in JS to match the href value and give that anchor tag a class of .current like this:

//the following code will be a JS code
var urlValue = document.getElementById('url_value').value; //here we get the `$current` value from our hidden input box above.
document.querySelector('a[href="'+urlValue+'"]').classList.add('current') //this gets the `` tag that has the value of `$current`

In my opinion this JS method is more of a hack but it totally works and it removes all those PHP lines in every link in your nav.

Give it a try and let me know if this solves your problem.

user_378779 · Answer

@Relcode's code for generating the links can be shortened and simplified by putting link data in an array and iterating through it:


 'Spiel',
            'releases' => 'Releases',
            'merchandise' => 'Merchandise',
            'guides' => 'Guides',
            'emulation' => 'Emulation',
            'mods' => 'Mods',
            'savegame' => 'Savegame',
        ] as $key => $description
    ) {
?>

Add class based on dynamical url parameter (click and load)

2 Answers