我想使用文字區域在 HTML 程式碼和預覽 html 之間切換
當點擊 HTML 時，它會顯示隱藏文字區域的程式碼 當再次點擊 HTML 時，它會再次顯示
我想要設計這樣的東西
我嘗試過
<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>
您可以有另一個
div專門用於顯示預覽。然後，當使用者切換 HTML 視圖時，將文字區域的值插入到div的innerHTML中並顯示它。但這可能會讓您的應用程式遭受 XSS 攻擊，因此使用時要小心。
$('.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}