0
230
ViewsAdd class based on dynamical url parameter (click and load)
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.
<?php
if (!empty($_GET["page"])
&& preg_match("/^[a-z]+$/i", $_GET["page"]) == 1
&& file_exists($pageFile = __DIR__ . "/subpages/" . $_GET["page"] . ".php")) {
include $pageFile;
}
else {
include __DIR__ . "/subpages/game.php";
}
?>
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:
<nav id="tabs">
<a class="tab" href="game">Spiel</a>
<a class="tab" href="releases">Releases</a>
<a class="tab" href="merchandise">Merchandise</a>
<a class="tab" href="guides">Guides</a>
<a class="tab" href="emulation">Emulation</a>
<a class="tab" href="mods">Mods</a>
<a class="tab" href="savegame">Savegame</a>
</nav>
2 answers
Answer question0
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:
<nav id="tabs">
<a class="tab <?= $current == 'game' ? 'current' : ''; ?>" href="game">Spiel</a>
<a class="tab <?= $current == 'releases' ? 'current' : ''; ?>" href="releases">Releases</a>
<a class="tab <?= $current == 'merchandise' ? 'current' : ''; ?>" href="merchandise">Merchandise</a>
<a class="tab <?= $current == 'guides' ? 'current' : ''; ?>" href="guides">Guides</a>
<a class="tab <?= $current == 'emulation' ? 'current' : ''; ?>" href="emulation">Emulation</a>
<a class="tab <?= $current == 'mods' ? 'current' : ''; ?>" href="mods">Mods</a>
<a class="tab <?= $current == 'savegame' ? 'current' : ''; ?>" href="savegame">Savegame</a>
</nav>
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:
<input id="url_value" type="hidden" value="<?= $current; ?>"/>
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 `<a></a>` 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.
0
@Relcode's code for generating the links can be shortened and simplified by putting link data in an array and iterating through it:
<nav id="tabs">
<?php
foreach (
[
'game' => 'Spiel',
'releases' => 'Releases',
'merchandise' => 'Merchandise',
'guides' => 'Guides',
'emulation' => 'Emulation',
'mods' => 'Mods',
'savegame' => 'Savegame',
] as $key => $description
) {
?>
<a class="tab<?php if ($current == $key ) { ?> current<?php } ?>" href="<?= $key ?>"><?= $description ?></a>
<?php
}
?>
</nav>