1

コードのスニペットを表示および非表示にするスクリプトをインターネットで見つけました。

 function show(shown, hidden,) {
    document.getElementById(shown).style.display='block';
    document.getElementById(hidden).style.display='none';
    return false;
 }


<a href="#" onclick="return show('Page1','Page2');">Page 1</a>
<a href="#" onclick="return show('Page2','Page1');">Page 2</a>

私の質問は、これを変更してより多くのページを含めるにはどうすればよいですか?

私が見つけた唯一の方法はこれでした：

    function show(shown, hidden1, hidden2, hidden3) {
      document.getElementById(shown).style.display='block';
      document.getElementById(hidden1).style.display='none';
      document.getElementById(hidden2).style.display='none';
      document.getElementById(hidden3).style.display='none';
      return false;
    }


<a href="" onclick="return show('Page1','Page2','Page3','Page4' );">Page 1</a>
<a href="" onclick="return show('Page2','Page1','Page3','Page4' );">Page 2</a>
<a href="" onclick="return show('Page3','Page1','Page2','Page4' );">Page 3</a>
<a href="" onclick="return show('Page4','Page1','Page2','Page3' );">Page 4</a>

…が、ちょっと面倒そうです。スクリプトの 'hidden' 引数に一度に 3 ページを渡す方法はありますか?

ありがとう！

4

3 に答える 3

2

パラメータとして配列を渡すことができhiddenます。次に、次のように JS を変更する必要があります。

function show(shown, hidden ) {
    document.getElementById(shown).style.display='block';
    for( var i=hidden.length; i--; ) {
      document.getElementById(hidden[i]).style.display='none';
    }
    return false;
 }

HTML は次のようになります。

<a href="" onclick="return show('Page1', ['Page2','Page3','Page4'] );">Page 1</a>

別の方法として、スタイルを設定する代わりにクラスを操作できます。次に、hiddenパラメーターをまとめてドロップできます。

function show( shown ) {

    // remove class 'shownPage' everywhere
    var els = document.querySelectorAll( '.shownPage' );
    for( var i=els.length; i--; ) {
      els.classList.remove( 'shownPage' );
    }

    // and just add it to the page to show
    document.getElementById(shown).classList.add( 'shownPage' );

    return false;
 }
于 2013-01-04T15:06:03.943 に答える
1

arguments2 番目の引数として配列を渡すことも、 object のような既存の配列を使用することもできます。

function show() {
    document.getElementById(arguments[0]).style.display='block';
    for(var i=1; i<arguments.length; i++){
        document.getElementById(arguments[i]).style.display='none';
    }
}

このコードでは、最初の引数は表示する ID で、他のすべての引数は非表示にする ID です。

于 2013-01-04T15:07:21.600 に答える
0

を使用したり、 Sirkoargumentsによって提案された配列を渡したり、オブジェクトを渡したり、選択したすべてのノード (クラスなど) を選択する方法を使用して、必要なノードのみを表示したりできます。

// arguments
function show() {
    var i = arguments.length;
    if (i > 0) {
        while (--i) document.getElementById(arguments[i]).style.display = 'none';
        document.getElementById(arguments[0]).style.display = 'block';
    }
}
// show('vis_id_1', 'hid_id_1', 'hid_id_2',...)

// object
function show(obj) {
    var id;
    for (id in obj) {
        if (obj.hasOwnProperty(id)) { // safety filter
            document.getElementById(id).style.display = obj[id];
        }
    }
}
// show({'vis_id_1':'block', 'hid_id_1':'none'});
于 2013-01-04T15:14:57.420 に答える