Saya mahu menggunakan kawasan teks untuk bertukar antara kod HTML dan pratonton html
Apabila mengklik pada HTML, ia akan menunjukkan kod kawasan teks tersembunyi Apabila mengklik semula HTML, ia akan dipaparkan semula
Nak design macam ni
Saya dah cuba
<style>
.container {
width:500px;
position: fixed;
}
.right-element {
background: red;
display: inline-block;
position: absolute;
right: 0;
}
</style>
<div class="container">
<div class="right-element">
Preview
</div>
<textarea id="w3review" name="w3review" style="position:relative;width:100%;height:75%;resize: none; " ><h3>At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.</h3></textarea>
</div>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda boleh mempunyai
div专门用于显示预览。然后，当用户切换 HTML 视图时，将文本区域的值插入到div的innerHTMLlain di dalamnya dan paparkannya.Tetapi ini mungkin mendedahkan aplikasi anda kepada serangan XSS, jadi gunakannya dengan berhati-hati.
$('.right-element').click(function() { $(this).toggle() $(this).siblings().toggle() togglePreview() }) let showPreview = false const w3Preview = $('#w3review-preview') function togglePreview() { if (!showPreview) { w3Preview.html(w3review.value) w3Preview.show() $(w3review).hide() } else { w3Preview.hide() $(w3review).show() } showPreview = !showPreview }#html,#w3review-preview{display:none}.container{position:fixed;width:500px}.right-element{background:red;display:inline-block;position:absolute;right:0;z-index:1}