隐藏身体标签，但仍显示div
[英]hide body tag but still show a div
问题描述
<script>
$(document).ready(function(){
$("#print").click(function(){
$("body").hide();
$("p").show();
window.print();
$("body").show();
});
});
</script>
</head>
<body>
<p>THIS SHOULD BE PRINTED </p>
<button >Hide</button>
<button >Show</button>
<button id="print">print</button>
</body>
given is a sample code. 
给出的是示例代码。 Clicking on print button should hide body of page except the values inside "p" tags. 单击“打印”按钮应隐藏页面主体，但“ p”标记中的值除外。 need help as to how to achieve this ? 需要帮助如何实现这一目标？ is there some way of making "p" tag or "div" tag act as body temporarily ? 有什么方法可以使“ p”标签或“ div”标签暂时充当主体？
3 个解决方案
解决方案1
3 已采纳 2018-02-07 23:57:14
使用下面给定的功能首先隐藏body标签的所有子项，然后显示所需的子项
$("body").find("*").hide();
解决方案2
0 2018-02-07 23:42:09
I would structure your application differently as you can't show something contained within the element you have hidden. 我将以不同的方式构造您的应用程序，因为您无法显示隐藏元素中包含的内容。
<body>
<div id="hide-me"></div>
<p id="show-me">THIS SHOULD BE PRINTED</p>
</body>
and change your logic to something like this... 然后将您的逻辑更改为类似的内容...
$(document).ready(function(){
$("#print").click(function(){
$("#hide-me").hide();
$("#show-me").show();
window.print();
$("#hide-me").show();
});
});
解决方案3
0 2018-02-08 00:08:59
It can be risky to hide everything in the page. 隐藏页面中的所有内容可能会有风险。 Also, the approach makes you ahve to add the content after hiding the body. 同样，该方法使您可以在隐藏正文之后添加内容。
A better approach is to make the content you want come to the front, fill up the whole screen, and hide everything else behind it without deleting. 更好的方法是使所需的内容排在最前面，填满整个屏幕，然后将其他所有内容隐藏在其中而不删除。
And it's very simply to do so. 这样做非常简单。
$(function() { $('.show-print').on('click', function() { $('.print-container').addClass('active-print'); }); });
.print-container { position: fixed; background: white; top: 0; left: 0; bottom: 0; right: 0; } .print-container:not(.active-print) { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> Normal body content </p> <button class="show-print">Print</button> <div class="print-container"> <div class="print-content"> I'm Print. I'm stronger than BODY! </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.