Come aprire un nav tab specifico di Bootstrap da un link esterno con php

Una soluzione offerta da un case history vissuto di recente. Ce ne saranno diversi, visto che il sito da poco pubblicato è davvero un sitone che ha richiesto mesi di lavoro. Ma la storia ve la spiegherò in un altro post in un altro momento.

In questa pagina, che è un custom type “speciali_fiere”, come si può facilmente dedurre, ho inserito dei tab nav di Bootstrap (tutto il sito è basato su questo framework), e fin qui tutto bene. Come vedete c’è un tab prodotti, notizie e galleria immagini.

Il problema

navtab

Per esigenze redazionali si è reso necessario linkare direttamente al tab galleria, per mostrare direttamente le foto delle fiere, magari da una notizia in homepage o altri link interni o esterni al sito.

Il problema è che non esiste un indirizzo diretto al tab, perché come sapete i contenuti sono caricati tutti nella stessa pagina, ma mostrati o nascosti grazie ai tab di navigazione. E non esiste pertanto una url diretta a tali tab.

Ho cercato diverse soluzioni con jQuery, ma vai a capire perché, nessuna funzionava. Qualche conflitto, o forse la mia incompatibilità con tale linguaggio. Fatto sta che spazientita mi si è illuminata la lampadina: ma sfruttare le classi già esistenti e mostrarle grazie al php?

Ed ecco la soluzione.

Molto semplicemente prelevo dalla url la variabile tab e faccio scrivere tramite php la classe “in active” che attiva il tab, e stessa cosa per i tab, con la classe “active” (altrimenti vi mostra il contenuto ma risulta visivamente attivo il tab di default).

Successivamente la navigazione procede come sempre. Provare per credere 🙂

url della pagina: link to menu1


$tab = $_GET['tab'];
?>
 class="nav nav-tabs">
  
  • if ($tab=='menu1' OR $tab=='menu2') { echo ""; } else { echo "active"; } ?>"> data-toggle="tab" href="#home">Prodotti
  • if ($tab=='menu1') { echo "active"; } ?>"> data-toggle="tab" href="#menu1">News
  • if ($tab=='menu2') { echo "active"; } ?>"> data-toggle="tab" href="#menu2">Gallery
  • class="tab-content">
    if ($tab=='menu1' OR $tab=='menu2') { echo ""; } else { echo "in active"; } ?> ">

    Prodotti

    Contenuto della pagina, zona prodotti

    Lascia un commento

    Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

    Scarica la miniguida "Creare il proprio logo"
    Iscrivendoti alla newsletter riceverai la guida in pdf direttamente al tuo indirizzo email.
    Guide to Million Dollar Success
    My Website
    Per chi inizia a muoversi nel web
    Scarica la miniguida "Creare il proprio logo"
    Iscrivendoti alla newsletter riceverai la guida in pdf direttamente al tuo indirizzo email.
    My Website
    Per chi inizia a muoversi nel web
    %d blogger hanno fatto clic su Mi Piace per questo: