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

    lauryn

    Web designer dal 2002, mi occupo di content marketing per la società WordSteps SLT LTD di Edimburgo e altri clienti. Vivo a Milano, sposata con una figlia e due cagnoline, e una passione per libri e Scozia. Ultimo libro uscito 4 passi per andare online e trovare nuovi clienti da subito

    Rispondi

    Scarica la checklist per partire con il tuo sito
    Iscrivendoti alla newsletter mensile riceverai la checklist pdf alla tua casella email
    Guide to Million Dollar Success
    My Website
    Per chi inizia a muoversi nel web
    Scarica lo starter kit del professionista
    Iscrivendoti alla newsletter riceverai la guida in pdf direttamente al tuo indirizzo email.
    My Website
    Per chi inizia a muoversi nel web
    Un metodo efficace se sei un professionista che offre servizi ma sei alle prime armi con tutto ciò che riguarda il web. Ottieni indicazioni su sito web, blog, social e funnel marketing volti a portare nuovi clienti effettivi.
    4 PASSI PER ANDARE ONLINE e ottenere clienti da subito
    Un metodo efficace se sei un professionista che offre servizi ma sei alle prime armi con tutto ciò che riguarda il web. Ottieni indicazioni su sito web, blog, social e funnel marketing volti a portare nuovi clienti effettivi.
    4 PASSI PER ANDARE ONLINE e ottenere clienti da subito
    %d blogger hanno fatto clic su Mi Piace per questo: