richiamare un div tramite pulsante

[merovese]

Ciao ragazzi, vorrei sapere se, dovendo inserire un testo in un contenitore della mia pagina, è possibile richiamare un contenitore (per fruire degli altri testi), situato nella stessa posizione del primo, tramite pulsante...mi sono spiegato? spero di si.
Grazie

[ninja72]

Non è molto chiaro, se non ho capito male vorresti prendere il contentuto testuale contenuto per esempio nel div A e tramite il click di un pulsante (button) farlo vedere anche sul div B ?
Se cos'ì potresti utilizzare javascript, altrimenti spiegati meglio magari con un po di codice.

[merovese]

Non è molto chiaro, se non ho capito male vorresti prendere il contentuto testuale contenuto per esempio nel div A e tramite il click di un pulsante (button) farlo vedere anche sul div B ?
Se cos'ì potresti utilizzare javascript, altrimenti spiegati meglio magari con un po di codice.

no, non mi sono spiegato, allora ho un testo in un div, premendo un pulsante (anziché far aprire una nuova pagina) è possibile cambiare il testo nello stesso div, a seconda del pulsante premuto? ho 4 tasti, in base al tasto premuto vorrei visualizzare il testo direttamente nel div.

[Dascos]

no, non mi sono spiegato, allora ho un testo in un div, premendo un pulsante (anziché far aprire una nuova pagina) è possibile cambiare il testo nello stesso div, a seconda del pulsante premuto? ho 4 tasti, in base al tasto premuto vorrei visualizzare il testo direttamente nel div.

Sì. A seconda della situazione hai almeno due strade:
1) i testi li sai già (sono "fissi"). I testi li scrivi o in div nascosti o in variabili js. Alla pressione del tasto_a vai a recuperare il contenuto del div nascosto_a (o della variabile_js_a) e la mostri nel div_visibile. Alla pressione del tasto_b recuperi il contenuto del div_nascosto_b e lo mostri nel div_visibile
2) i testi non li sai (sono tanti, sono estremamente variabili ecc). Tramite chiamate ajax/xajax, alla pressione del tasto "rimandi" a una pagina php/asp/quel_che_vuoi che si recupera i testi da un db e li restituisce alla funzione ajax/xajax, che a sua volta farà, tramite le cosiddette callback, visualizzare nel div_visibile il testo che ti arriva dalla pagina php/asp ecc

[KillerWorm]

faccio un UP solo per aggiornare l'anteprima delle risposte che ha bypassato l'ultimo post di Dascos

[merovese]

Sì. A seconda della situazione hai almeno due strade:
1) i testi li sai già (sono "fissi"). I testi li scrivi o in div nascosti o in variabili js. Alla pressione del tasto_a vai a recuperare il contenuto del div nascosto_a (o della variabile_js_a) e la mostri nel div_visibile. Alla pressione del tasto_b recuperi il contenuto del div_nascosto_b e lo mostri nel div_visibile
2) i testi non li sai (sono tanti, sono estremamente variabili ecc). Tramite chiamate ajax/xajax, alla pressione del tasto "rimandi" a una pagina php/asp/quel_che_vuoi che si recupera i testi da un db e li restituisce alla funzione ajax/xajax, che a sua volta farà, tramite le cosiddette callback, visualizzare nel div_visibile il testo che ti arriva dalla pagina php/asp ecc

ahahahah la follia! non credo di essere in grado, mi fai un paio di esempi? però ad essere sincero credo che la prima via sia più facile per me, anche se mi è stato chiesto di inserire in questi div dei testi che possano essere richiamati direttamente da file txt inseriti in specifiche cartelle dello spazio hosting, ma non credo sia un strada percorribile

[Niknex]

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.

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

[ninja72]

Potresti utilizzare l'API fetch (javascript) per prelevare i dati da un file json che contiene i vari testi anzichè metterli su file di testo separati.
Lo puoi fare sia con un approccio di elementi fissi con tot elementi (bottoni e div contenitori che ho chiamato item), oppure dinamico in base ai base dati presenti sul file json.

questo è il contenuto del file dati.json prensete nella root del progetto.

{
    "div1": "testo 1",
    "div2": "testo 2",
    "div3": "testo 3"
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        #container {
            display: flex;
            flex: 1 1 0;
            margin-bottom: 20px;
        }

        .item {
            width: 200px;
            height: 100px;
            border: 1px solid red;
            overflow: auto;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <div id="buttons">
        <button id="b1">bottone1</button>
        <button id="b2">bottone2</button>
        <button id="b3">bottone3</button>
    </div>


    <script>
        const items = document.getElementsByClassName('item')
        const btn1 = document.getElementById('b1')
        const btn2 = document.getElementById('b2')
        const btn3 = document.getElementById('b3')

        const loadJson = async () => {
            const fileJson = await fetch('./dati.json')
            const dataJson = fileJson.json()
            return dataJson
        }

        (async function init() {
            const objJson = await loadJson()

            function viewItems(idx, div) {
                items[idx].textContent = objJson[div]
            }

            btn1.addEventListener('click', viewItems.bind(this, 0, "div1"))
            btn2.addEventListener('click', viewItems.bind(this, 1, "div2"))
            btn3.addEventListener('click', viewItems.bind(this, 2, "div3"))

        })()

    </script>
</body>

</html>

Mentre per il discorso dinamico potresti fare in questo modo.

 <div id="container"></div>
    <div id="buttons"></div>

    <script>
        const container = document.getElementById('container')
        const items = document.getElementsByClassName('item')
        const btns = document.getElementById('buttons')

        const loadJson = async () => {
            const fileJson = await fetch('./dati.json')
            const dataJson = fileJson.json()
            return dataJson
        }

        (async function init() {
            const objJson = await loadJson()

            function viewItems(idx, div) {
                items[idx].textContent = objJson[div]
            }

            const objJsonCount = Object.keys(objJson).length

            for (let i = 0; i < objJsonCount; i++) {
                const myDiv = document.createElement('div')
                myDiv.setAttribute('class', 'item')
                container.appendChild(myDiv)
                const myBtn = document.createElement('button')
                myBtn.setAttribute('class', 'mybtn')
                myBtn.textContent = `bottone${i + 1}`
                btns.appendChild(myBtn)
                btns.children[i].addEventListener('click', viewItems.bind(this, i, `div${i + 1}`))
            }

        })()

    </script>

[merovese]

ti ringrazio per la risposta, e mi scuso per il ritardo, solo che prima di affrontare questo argomento ho dovuto, grazie ad un enorme aiuto di KillerWorm cercherò di spiegarti bene le mie necessità.
nel mio menù ci sono 4 tasti, uno dei quali è HOME. quindi tornando al tuo discorso, sono limitati ed immutabili nel tempo.
ovviamente il "div" home è quello sempre visibile all'apertura del sito.
ora sinceramente parlando non mi è molto chiaro il codice che hai postato non essendo ferrato sull'argomento.
poi una volta capito il funzionamento base magari pensiamo a capire ed applicare il caricamento dati tramite file esterno.
grazie

[merovese]

quindi per 4 div e 4 file sarebbe meglio il tuo modo?