0
245
ViewsAgregue una clase basada en el parámetro de URL dinámico (haga clic y cargue)
Tengo un script php que me permite cargar dinámicamente contenido en mi página según el parámetro de URL. Además, tengo .htaccess configurado para que el prefijo de la cadena de consulta esté oculto, lo que significa que se ven como example.com/games/demons-souls/[?page=]mods.
[?page=] está oculto a través de .htaccess. Hasta aquí todo bien.
<?php if (!empty($_GET["page"]) && preg_match("/^[az]+$/i", $_GET["page"]) == 1 && file_exists($pageFile = __DIR__ . "/subpages/" . $_GET["page"] . ".php")) { include $pageFile; } else { include __DIR__ . "/subpages/game.php"; } ?>Ahora quería mostrar qué página está activa en un panel de pestañas, donde la pestaña activa es, digamos, negra. Entonces necesitaría activar la clase tab.current. Y para hacer esto, necesito hacer que mi código reconozca de alguna manera qué parámetro de URL está cargado y agregar dinámicamente la clase .current a la pestaña correspondiente. Espero poder explicarlo lo suficientemente bien.
No tengo la menor idea de cómo lograr esto.
Por favor ayuda.
Edición 1: aquí hay una imagen de lo que me gustaría lograr:
Edición 2: según lo solicitado, aquí está el código HTML:
<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
No estoy seguro de si esto es lo que está buscando, pero puede probar el siguiente código:
Este es el código que debe ejecutarse en la parte superior, antes de los enlaces de navegación.
$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'El siguiente paso debe aplicarse a sus enlaces de navegación:
<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> Esto es lo que sucede en el código anterior. Usé el operador ternario para verificar el nombre de la variable $url y, si coincide con el valor href , se agregará una clase .current .
O intente usar el truco JS.
Después de obtener su $current en PHP, tenga una entrada HTML como esta:
<input id="url_value" type="hidden" value="<?= $current; ?>"/> La entrada anterior tendrá el valor de $current y, por lo tanto, este valor se puede usar en JS para hacer coincidir el valor href y darle a esa anchor tag una clase de .current como esta:
//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`En mi opinión, este método JS es más un truco, pero funciona totalmente y elimina todas esas líneas de PHP en cada enlace de tu navegación.
Pruébelo y avíseme si esto resuelve su problema.
0
El código de @Relcode para generar los enlaces se puede acortar y simplificar colocando los datos del enlace en una matriz e iterando a través de ellos:
<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>