打印已被点击并隐藏其余的div的HTML页面

我有一个HTML页面，里面有很多不同的DIV，我想打印出用户点击并隐藏的DIV其余的部分。打印已被点击并隐藏其余的div的HTML页面

有人能告诉我怎么用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>

来源

2012-04-30 Tom Kerkhove

我不知道你的意思“页”是什么 - 所有div都在同一页上。你可能想隐藏除点击的div之外的所有内容吗？ – pimvdb

是的，这正是我想要做的！ –

这仅仅是延长pimvdb's answer。

的jQuery：

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

或者所建议的：

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

来源

2012-04-30 09:00:35 andlrc

+1，或许''.closest（“div”）'更合适一些（如果结构发生变化） – pimvdb

@pimvdb right .. :) – andlrc

隐藏元素意味着设置它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-30 08:34:51 pimvdb

我已经在使用jQuery了，你能给我一个关于如何在jQuery中做到这一点的提示吗？ –

这是我的整个结构，但它不工作:( –

你可以使用类似的document.getElementById（id）的一个JavaScript函数来隐藏其他两个div的

所以在你的功能，你可以只使用

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

来源

2012-04-30 08:38:44

对不起，只有在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-30 09:16:54

打印已被点击并隐藏其余的div的HTML页面

回答

相关问题