使用 Javascript 更改另一个 Div 中的内容
P粉769045426
P粉769045426 2023-09-05 23:33:53
[HTML讨论组]
<p>我希望通过单击链接容器并使用 JavaScript 函数 (<code>show-text()</code>) 来更改另一个 div (<code>id="new-text"</code>) 的内容代码>)</p> <p> <pre class="brush:html;toolbar:false;"> &lt;section&gt; &lt;div class="row"&gt; &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3"&gt; &lt;a href="#" id="text-1" onclick="show-text()"&gt; &lt;div class="home-side-menu"&gt;Mission Statement&lt;/div&gt;&lt;/a&gt; &lt;a href="#" id="text-2" onclick="show-text()"&gt; &lt;div class="home-side-menu"&gt;Letter-writing&lt;/div&gt;&lt;/a&gt; &lt;a href="#" id="text-3" onclick="show-text()"&gt; &lt;div class="home-side-menu"&gt;Peace Ideas&lt;/div&gt;&lt;/a&gt; &lt;a href="#" id="text-4" onclick="show-text()"&gt; &lt;div class="home-side-menu"&gt;Power Of Love&lt;/div&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 col-xl-9"&gt; &lt;div class="text-formatting" id="new-text"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;script type="text/javascript"&gt; function show-text(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" } &lt;/script&gt; </pre> </p>
P粉769045426
P粉769045426

全部回复(1)
P粉232793765


更改后的代码(工作)

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

onclick="show-text() 内,传递有效参数(与您的 IF 条件匹配),例如“text-1”或“text-2”..

应该是
其余部分也是如此。

并在 Script 中使用 === (严格相等检查)进行比较。检查Js 比较运算符

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号