problema con menu a barra

[serino84]

Salve,
ho un menu

<div class="btn-group checkout-progress">
<ul> <a href="#c" data-toggle="tab" role="button" class="btn btn-step " ><span class="step-nb">1</span> <span class="step-label">1</span></a></li>
<a href="#f" data-toggle="tab" role="button" class="btn btn-step "><span class="step-nb">2</span> <span class="step-label">2</a></li>
<a href="#p" data-toggle="tab" role="button" class="btn btn-step "><span class="step-nb">3</span> <span class="step-label">3</a></li>
<a href="#o" data-toggle="tab" role="button" class="btn btn-step "><span class="step-nb">4</span> <span class="step-label">4</a></li> </ul>
</div>

successivamente ho il div che mi richiama l'id #c
<div class="tab-pane fade" id="c">
......

Il mio problema è che voglio far uscire nella pagina iniziale il menu selezionato ad 1 con il contenuto..

In questo momento il menu mi esce cosi

1 | 2 | 3 | 4 |
e non ho nulla nella pagina

mentre io vorrei
1| 2 | 3 | 4|
il testo richiamato dal div <div class="tab-pane fade" id="c">


HO provato anche ad utilizzare active ma di sicuro sbaglio qualcosa

[Roby140569]

Dovresti postare il codice indentato (così diventa più leggibile) e usa l'apposito tag CODICE.

Da un'occhiata veloce, ti segnalo che nel tuo elenco non ordinato, non hai messo i tag di apertura dei list item e ci sono degli span non chiusi.

Non ho capito cosa tu voglia ottenere e quale sia il problema che hai.

[serino84]

<div class="btn-group checkout-progress">   
                         <ul>
                                <a  href="#1" data-toggle="tab" role="button" class="btn btn-step  "   ><span class="step-nb">1</span>  <span class="step-label">1</span></a>

                                <a href="#2" data-toggle="tab" role="button" class="btn btn-step "><span class="step-nb">2</span> <span class="step-label">2</a></span>

                               <a href="#3" data-toggle="tab" role="button" class="btn btn-step "><span class="step-nb">3</span> <span class="step-label">3</a></span>

                                <a href="#4" data-toggle="tab" role="button" class="btn btn-step "><span class="step-nb">4</span> <span class="step-label">4</a></span>

                                
                            </ul>


                            </div>
                            
                            <div class="tab-content">
                                <div class="tab-pane fade" id="1">
                                    <div class="form-container">
CIAO VOGLIO VEDERE QUESTO 
</div>
    
                                            
                                        </form>
                                    </div>
                                </div>

QUINDI nella pagina che carico mi deve uscire il menu

1 | 2 | 3 | 4 | con 1 evidenziato e scritta
CIAO VOGLIO VEDERE QUESTO

[Roby140569]

Ti consiglio di lavorare con codice pulito e senza errori.
Nel codice che hai postato, oltre ad esserci una chiusura di un tag form (senza che prima sia stato aperto), ti sei perso list item e hai chiuso il tag span in maniera sbagliata.

Questa è la prima parte del codice con i tag aperti e chiusi correttamente.

<div class="btn-group checkout-progress">   
    <ul>
        <li><a href="#1" data-toggle="tab" role="button" class="btn btn-step"><span class="step-nb">1</span> <span class="step-label">1</span></a></li>
        <li><a href="#2" data-toggle="tab" role="button" class="btn btn-step"><span class="step-nb">2</span> <span class="step-label">2</span></a></li>
        <li><a href="#3" data-toggle="tab" role="button" class="btn btn-step"><span class="step-nb">3</span> <span class="step-label">3</span></a></li>
        <li><a href="#4" data-toggle="tab" role="button" class="btn btn-step"><span class="step-nb">4</span> <span class="step-label">4</span></a></li>
    </ul>
</div>

Se vuoi che un elemento a attivo venga evidenziato, dovresti definirne una classe.

a.active { color: #ff0000 }

<div class="btn-group checkout-progress">   
    <ul>
        <li><a href="#1" data-toggle="tab" role="button" class="btn btn-step active">1</a></li>
        <li><a href="#2" data-toggle="tab" role="button" class="btn btn-step">2</a></li>
        <li><a href="#3" data-toggle="tab" role="button" class="btn btn-step">3</a></li>
        <li><a href="#4" data-toggle="tab" role="button" class="btn btn-step">4</a></li>
    </ul>
</div>

Prova così e vedi cosa succede.

[serino84]

così com e lo hai scritto tu mi esce orizzontale

1
2
3
4
Ma il mio problema è che quando apro la pagina mi devo mostrare il menu sul numero 1 e quello che ci sta dentro

[Roby140569]

così com e lo hai scritto tu mi esce orizzontale

1
2
3
4
Ma il mio problema è che quando apro la pagina mi devo mostrare il menu sul numero 1 e quello che ci sta dentro

Ho solo corretto gli errori nel tuo codice ed il menu appare verticale.
Per averlo in orizzontale, devi lavorare con i CSS.
Prova a leggere qui: http://www.html.it/pag/18988/menu-or...-con-le-liste/