0

我有一个包含许多不同 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>
4

4 回答 4

2

这只是为了扩展pimvdb 的答案。

jQuery：

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

或按照建议：

$("a").on("click", function(){
    $("div").hide();
    $(this).closest("div").show();
});
于 2012-04-30T09:00:35.137 回答
2

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

结合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 之类的库使这变得更加容易；您可能想检查一下（尽管如果唯一的用例是这个，我不建议包括它）。

于 2012-04-30T08:34:51.310 回答
1

抱歉，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>
于 2012-04-30T09:16:54.707 回答
0

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

所以在你的功能中你可以使用

function hide1() {
document.getElementById(div2).style.display = "none";
document.getElementById(div3).style.display = "none";
}
于 2012-04-30T08:38:44.177 回答