jquery 如何在同一个HTML块中显示预览屏幕和代码屏幕？

pnwntuvh 于 2023-04-11 发布在 jQuery

关注(0)|答案(1)|浏览(199)

你好，我在寻求帮助，因为我被一个明显很简单的问题卡住了，但我不能解决。
我想在div中显示整个网页的渲染（包括doctype，html标签等）。下面我复制了相同的代码，但要显示它。
因此，用户将首先具有可视化呈现，然后按钮将允许他看到相应的代码，隐藏呈现块，等等。
我在这里复制这个概念的简化版本：

var html = $('#code .frame').text();
      $('#preview .frame').html(html);
    
    $('#codeBtn').on('click',function(){
        $('#preview').hide();
        $('#code').show();
      })

#code{
  display:none
}

<button id="codeBtn">grab the code</button>

<div id="preview">
 <div class="frame"></div>
</div>

<div id="code">
  <div class="frame">
    <p>hello world</p>
  </div>
</div>

所以我在一个iframe里面试了一下，把代码块放了两次，都没有得到满意的结果
任何帮助是赞赏！

编辑：因为在这个例子中（adobe design system或liquid design system）我们有一些组件的例子。每个组件都有一个可视化的渲染，点击一个按钮，你就可以看到代码。我想做的是，而不是在下面展开一个div，是用代码块替换渲染块。一个按钮就可以在视觉和代码之间切换。因为我想显示整个页面，所以我想保存空间。

由于块嵌入了自己的样式，它会干扰主页面的样式。这就是为什么使用load函数，或者简单地复制代码，一个正常，另一个转义，它不能很好地工作。

jquery

来源：https://stackoverflow.com/questions/75936811/how-can-i-display-a-preview-screen-and-a-code-screen-in-the-same-html-block

1条答案

按热度按时间

4nkexdtk1#

好吧，终于，我终于成功了。

$('#codeBtn').on('click',function(){
        $('#preview,#code').toggleClass('hide');
      
      })

#code{
  display:none;
}
#code.hide{
  display:block;
}
#preview.hide{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="codeBtn">grab the code</button>

<div id="preview">
  <iframe  name="frame" src="myfile.html" class="frame"></iframe>
</div>

<div id="code">
  <div class="frame">
    <p>hello world</p>
  </div>
</div>

代码在这里不起作用，因为我使用的是一个应该调用文件的iframe。这是我找到的唯一解决方案，即使它对我来说有点不稳定。我正在寻找的是这样的东西

jQuery('#codeBtn').on('click',function(){
            jQuery('#preview,#code').toggleClass('hide');
          
          })

#code{
      display:none;
    }
    #code.hide{
      display:block;
    }
    #preview.hide{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="codeBtn">grab the code</button>

    <div id="preview">
    <div class="frame"><p>
    hello world
    </p></div>
    </div>

    <div id="code">
      <div class="frame">
        &lt;p&gt;hello world&lt;/p&gt;
      </div>
    </div>

赞(0）回复(0）举报 2023-04-11

我来回答

jquery 如何在同一个HTML块中显示预览屏幕和代码屏幕？

1条答案

相关问题

热门标签

最新问答