Tukar kandungan dalam Div lain menggunakan Javascript
P粉769045426
2023-09-05 23:33:53
<p>我希望通过单击链接容器并使用 JavaScript 函数 (<kod>show-text()</code>) 来更改;code<< /kod>) 的内容代码>)</p>
<p>
<pre class="brush:html;toolbar:false;"> <bahagian>
<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="show-text()">
<div class="home-side-menu">Pernyataan Misi</div></a>
<a href="#" id="text-2" onclick="show-text()">
<div class="home-side-menu">Penulisan surat</div></a>
<a href="#" id="text-3" onclick="show-text()">
<div class="home-side-menu">Idea Damai</div></a>
<a href="#" id="text-4" onclick="show-text()">
<div class="home-side-menu">Kuasa Cinta</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">
function show-text(id){
jika id="teks-1"
document.getElementById('new-text').innerHTML="SAMPLE TEKS 1"
jika id="teks-2"
document.getElementById('new-text').innerHTML="SAMPLE TEKS 2"
if id="text-3"
document.getElementById('new-text').innerHTML="CONTOH TEKS 3"
if id="text-4"
document.getElementById('new-text').innerHTML="CONTOH TEKS 4"
}
</skrip> </pra>
</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tukar kod (berfungsi)
<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>Dalam
onclick="show-text(), lulus parameter yang sah (padanan dengan keadaan JIKA anda), seperti "teks-1" atau "teks-2"..sepatutnya
Begitu juga yang lain.
Dan gunakan
===(semakan kesaksamaan yang ketat) dalam Skrip untuk membandingkan. Semak Js operator perbandingan