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
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