Visualizzazione dei risultati da 1 a 10 su 11

Visualizzazione discussione

  1. #7
    Utente di HTML.it
    Registrato dal
    Apr 2021
    Messaggi
    15
    Allora, se il numero di div è limitato, fisso e inmutabile nel tempo questa potrebbe essere una soluzione:
    Ogni div, oltre al testo, ha 4 tasti (ipotizzando che i div siano solo 4. Ecco perchè deve essere un numero limitato).
    Ogni tasto comunica alla funzione JS l'id del div da mostrare.
    codice:
    
        <div id="a"> 
            Testo A
            <button onclick="mostrami('a')">Mostra A</button>
            <button onclick="mostrami('b')">Mostra B</button>
            <button onclick="mostrami('c')">Mostra C</button>
            <button onclick="mostrami('d')">Mostra D</button>
        </div>
        <div id="b"> 
            Testo B
            <button onclick="mostrami('a')">Mostra A</button>
            <button onclick="mostrami('b')">Mostra B</button>
            <button onclick="mostrami('c')">Mostra C</button>
            <button onclick="mostrami('d')">Mostra D</button>
        </div>
        <div id="c"> 
            Testo C
            <button onclick="mostrami('a')">Mostra A</button>
            <button onclick="mostrami('b')">Mostra B</button>
            <button onclick="mostrami('c')">Mostra C</button>
            <button onclick="mostrami('d')">Mostra D</button>
        </div>
        <div id="d"> 
            Testo D
            <button onclick="mostrami('a')">Mostra A</button>
            <button onclick="mostrami('b')">Mostra B</button>
            <button onclick="mostrami('c')">Mostra C</button>
            <button onclick="mostrami('d')">Mostra D</button>
        </div>
    
    
    <script>
    
    
        //Nascondo i div eccetto il primo
        document.getElementById("b").style.display="none";
        document.getElementById("c").style.display="none";
        document.getElementById("d").style.display="none";
    
    
        var listaDiv=['a','b','c','d'];
    
    
        function mostrami(id){
    
    
            document.getElementById(id).style.display="initial"; //ripristina la visibilità sul div su cui hai cliccato
            for(var i=0;i<listaDiv.legth;i++){ //controllo tutti i div
                if(listaDiv[i]!=id){ //se l'id del div non combacia con quello  chiamato da tasto
                    document.getElementById(listaDiv[i]).style.display="none"; //nascondo il div
                }
            }
        }
    
    
    </script>
    Aggiorno:
    In caso di molti più div (non gestibili manualmente) consiglio per la funzione JS di usare l'attributo "class" piuttosto che l'id.

    Leggendo i commenti il testo presente nei div dovrà essere preso da dei file. Forse è meglio perchè in questo modo, tramite JS, hai modo di gestire meglio il numero di div e di tasti per cambiare div. Oltre questo il tuo "progetto" diventa molto piu scalabile. Che siano 5 o 500 (sarei curioso di vedere i 500 tasti) non avrai problemi per la gestione.
    Ultima modifica di Niknex; 20-10-2021 a 18:07 Motivo: Aggiornamento

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.