Changer le contenu dans une autre Div en utilisant Javascript
P粉769045426
P粉769045426 2023-09-05 23:33:53
0
1
566
<p> /code>) 的内容代码>)</p> <p> <pre class="brush:html;toolbar:false;"> <section> <div class="ligne"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3"> <a href="#" id="text-1" onclick="show-text()"> <div class="home-side-menu">Énoncé de mission</div></a> <a href="#" id="text-2" onclick="show-text()"> <div class="home-side-menu">Rédaction de lettres</div></a> <a href="#" id="text-3" onclick="show-text()"> <div class="home-side-menu">Idées de paix</div></a> <a href="#" id="text-4" onclick="show-text()"> <div class="home-side-menu">Le pouvoir de l'amour</div></a> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 col-xl-9"> <div class="text-formatting" id="new-text"> </div> </div> </div> ≪/section> <script type="text/javascript"> fonction show-text(id){ si id="text-1" document.getElementById('new-text').innerHTML="EXEMPLE DE TEXTE 1" si id="text-2" document.getElementById('new-text').innerHTML="EXEMPLE DE TEXTE 2" si id="text-3" document.getElementById('new-text').innerHTML="EXEMPLE DE TEXTE 3" si id="text-4" document.getElementById('new-text').innerHTML="EXEMPLE DE TEXTE 4" } </script> ≪/pré> </p>
P粉769045426
P粉769045426

répondre à tous(1)
P粉232793765


Code modifié (fonctionne)

<section>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
            <a href="#" id="text-1" onclick="showText('text-1')">
                <div class="home-side-menu">Mission Statement</div>
            </a>
            <a href="#" id="text-2" onclick="showText('text-2')">
                <div class="home-side-menu">Letter-writing</div>
            </a>
            <a href="#" id="text-3" onclick="showText('text-3')">
                <div class="home-side-menu">Peace Ideas</div>
            </a>
            <a href="#" id="text-4" onclick="showText('text-4')">
                <div class="home-side-menu">Power Of Love</div>
            </a>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 col-xl-9">
            <div class="text-formatting" id="new-text">
            </div>
        </div>
    </div>
</section>

<script type="text/javascript">
    function showText(id) {
        if (id === "text-1")
            document.getElementById('new-text').innerHTML = "SAMPLE TEXT 1";
        if (id === "text-2")
            document.getElementById('new-text').innerHTML = "SAMPLE TEXT 2";
        if (id === "text-3")
            document.getElementById('new-text').innerHTML = "SAMPLE TEXT 3";
        if (id === "text-4")
            document.getElementById('new-text').innerHTML = "SAMPLE TEXT 4";
    }
</script>

Dans onclick="show-text(), transmettez un paramètre valide (correspondant à votre condition IF), tel que "text-1" ou "text-2"..

devrait être
Le reste aussi.

Et utilisez === (vérification d'égalité stricte) dans le script pour comparer. Vérifiez les opérateurs de comparaison Js

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal