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

要素を非表示にすることは、その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 に答える
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 に答える
1

申し訳ありませんが、jsで印刷するためのwindow.print（）しかありません。つまり、ウィンドウ全体しか印刷できません。ドキュメントを印刷できるようにしたい場合は、CSSを使用して印刷できるようにします。たとえば、ナビゲーションを非表示にして印刷したいが、ページのタイトルとWebサイトの名前、およびページの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関数を使用して、他の2つのdivを非表示にすることができます

だからあなたの関数であなたはただ使うことができます

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