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: <a href="page.php?tab=menu1">link to menu1</a>

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

<div class="tab-content">
  <div id="home" class="tab-pane fade <? if ($tab=='menu1' OR $tab=='menu2') 
{
echo "";
} 
else {
echo "in active";
}
?>
">
    <h3>Prodotti</h3>
    <p>Contenuto della pagina, zona prodotti</p>
  </div>
  <div id="menu1" class="tab-pane fade <? if ($tab=='menu1') 
{
echo "in active";
} 
?>">
    <h3>News</h3>
    <p>Qui ci saranno le news.</p>
  </div>
  <div id="menu2" class="tab-pane fade <? if ($tab=='menu2') 
{
echo "in active";
} 
?>">
    <h3>Gallery</h3>
    <p>Qui ci sarà la gallery</p>
  </div>
</div>
Laura Gargiulo, web designer freelance e blogger. Autrice di "Come diventare web-coso" e "Consigli di webdesign base", moglie dal dicembre 2010 e madre dal dicembre 2012. Portfolio personale: Lauryn.it Parlo anche di viaggi ed expat su: Myplaceintheworld.it

Lasciaci un tuo commento!