3

私の機能:

function ChangeStep(id)
{
    var i = 1;

    // hide all other tabs:
    while(i<10) {
        var divID = 'tabs' + i;
        if (divID !== null) {
            document.getElementById(divID).className += " hide";
        }
        i++;
    }

    // show this one
    document.getElementById(id).className += " show";
}

私はそれをどのように呼んでいますか：

<div id="prev"><img src="img/prv.png" onClick="ChangeStep('tabs1'); return false;"></div>
<div id="next"><img src="img/nxt.png" onClick="ChangeStep('tabs2'); return false;"></div>

表示/非表示にしたい Div:

<div id="tabs1" class="hide"><h1>Step 1</h1></div>
<div id="tabs2" class="show"><h1>Step 2</h1></div>

私のCSS：

.hide { visibility: hidden; }
.show { visibility: visible; }

基本的に私がやりたいことは次のとおりです。次または前をクリックすると、他のすべてを非表示にしてこれを表示することで、対応する「タブ」を表示します。これを行うには、非表示にするか表示するかに応じて、クラス「非表示」または「表示」を追加する必要があります。

4

1 に答える 1

6

常にクラス名を追加しているため、それらは (一度表示された後)showとhideクラスの両方のメンバーになり、両方のルールセットが (通常のカスケード順序で) 適用されます。

他のクラスを維持する必要がない場合は、追加演算子+=を単純な割り当てに置き換えることができます。=

要素で他のクラスを維持する必要がある場合は、classList代わりに使用できます。

document.getElementById(divID).classList.remove('show');
document.getElementById(divID).classList.add('hide');

Old-IE をサポートする必要がある場合は、ポリフィル (おそらく で正規表現を実行するclassList) または同様の機能を提供する API を使用できます。ほとんどの一般的な JS ライブラリ (YUI や jQuery など) には 1 つが組み込まれています。

于 2013-06-02T20:28:55.963 に答える