打印带有已单击 div 的 HTML 页面并隐藏其余部分答案

【问题标题】：Print HTML-page with div that has been clicked on and hide the rest打印带有已单击 div 的 HTML 页面并隐藏其余部分
【发布时间】：2012-05-01 03:39:27
【问题描述】：

我有一个包含许多不同 DIV 的 HTML 页面，我想打印出用户单击的 DIV 并隐藏所有其余部分。

谁能告诉我如何在 Javascript 中做到这一点？

<html>
  <head>
    <title>Print Demo</title>

    <script type="text/javascript">
       <!-- MY JAVASCRIPT FUNCITON -->

    </script>

  </head>
  <body>

    <div id="div1">
       <a href="<JSMethod>">Print the page with this div</a>
    </div>

    <div id="div2">
       <a href="<JSMethod>">Print the page with this div</a>
    </div>

    <div id="div3">
       <a href="<JSMethod>">Print the page with this div</a>
    </div>

    </body>
</html>

【问题讨论】：

我不确定“页面”是什么意思 - 所有 div 都在同一页面上。您是否想隐藏除单击的 div 之外的所有内容？
是的，这正是我想做的！

标签： javascript html printing

【解决方案1】：

这只是扩展pimvdb's answer。

jQuery:

$("a").on("click", function(){
    $("div").hide();
    $(this).parent().show();
});

或者按照建议：

$("a").on("click", function(){
    $("div").hide();
    $(this).closest("div").show();
});

【讨论】：

+1，或许.closest("div")更合适一些（以防结构发生变化）。

【解决方案2】：

隐藏元素意味着将其style.display 属性设置为"none"。显示意味着为 div 元素将其设置为 "block"。

结合getElementsByTagName，您可以做到这一点：http://jsfiddle.net/b9cgM/。

function show(elem) {
  // hide all divs initially
  var allDivs = document.getElementsByTagName("div");
  for(var i = 0; i < allDivs.length; i++) {
    allDivs[i].style.display = "none";
  }

  // show the appropriate div
  elem.parentNode.style.display = "block";  // parent of the <a> is the <div> to show
}

您可以像<a href="#" onclick="show(this); return false;"> 这样绑定事件。然后将元素 (this) 传递给 show。

附带说明一下，像 jQuery 这样的库使这变得更加容易；您可能想检查一下（尽管如果唯一的用例是这个，我不建议包括它）。

【讨论】：

我已经在使用 jQuery 了，你能告诉我如何在 jQuery 中做到这一点吗？

【解决方案3】：

抱歉，js中只有window.print()用于打印，也就是说只能打印整个窗口。如果您希望某些人能够打印您的文档，请使用 CSS 使其可打印。例如，也许您希望您的导航消失以进行打印，但将页面标题和网站名称以及页面 URL 保留在那里（有时像 firefox 这样的浏览器会在它们太长时将其截断）。有时有些网站会取消浏览器控件，并错误地让您没有打印按钮 - 而且它是一个在线购买网站......以前发生过。

<style type="text/css">
@media print {
    .boxGreen {
    padding:10px;
    border-color:green;
    border-style:dashed;
    border-width:thin;
    }

}
@media screen {
    .boxGreen {
    padding:10px;
    border-color:green;
    border-style:dashed;
    border-width:thin;
    }
}
</style>

你可以做一个onclick="switchtodiv('someid')"，然后在 div 之后这样做：

<div onclick="switchtodiv('span1')">ClickMe<span id="span1">some content</span></div>
<div onclick="switchtodiv('span2')">ClickMe<span id="span2">some content</span></div>
<div onclick="switchtodiv('span3')">ClickMe<span id="span3">some content</span></div>
<!--you can generate these divs using a for statement...-->
<script type="text/javascript">
//switchdiv allows only 1 div tobe 
function switchdiv(id) {
    var ids=new Array('span1','span2','span3');
    var i;
    for (i=0; i < ids.length; i++) {
        if (ids[i] == id) {
            document.getElementById(ids[i]).style.visibility='visible';
            document.getElementById(ids[i]).style.display='block';
        } else {
            document.getElementById(ids[i]).style.visibility='hidden';
            document.getElementById(ids[i]).style.display='none';
        }
    }
}
</script>

【讨论】：

【解决方案4】：

您可以使用类似 document.getElementById(id) 的 javascript 函数来隐藏另外两个 div

所以在你的函数中你可以使用

function hide1() {
document.getElementById(div2).style.display = "none";
document.getElementById(div3).style.display = "none";
}

【讨论】：