2

クリックすると反対に表示または非表示になる2つのボタンが必要です。（つまり、style：display = none | block;を介して）。

最初は、button1はdisplay：blockで、button2はdisplay：noneです。

button1をクリックすると、button2がdisplay：blockに、button1がdisplay：noneに切り替わります。

これはおそらくとても単純なことだと思います。私の知識不足を許してください。

4

2 に答える 2

1

jqueryを使用しても問題がない場合、これは非常に簡単に実行できます。たとえば、このjsfiddlecss(key, value)のように、関数を使用してオブジェクトのcssを設定するだけです。

または、純粋なjsを使用する場合：このjsfiddle

于 2012-11-15T23:49:05.603 に答える
1

まず、2つのボタンを作成します。それらにid属性を指定して、それらにアクセスするためのエイリアスを作成します。

<button id="first">Click</button> <button id="second">Second</button>

定義したとおりにCSSを設定します。

#first  { display: block; }
#second { display: none;  }

次にJSが登場します。と呼ばれる関数を使用して、IDを介して両方の要素にアクセスしますdocument.getElementById()。これにより、指定されたIDの要素が返されます。

var first = document.getElementById( 'first' ),
    second = document.getElementById( 'second' );

そして今、私たちは関数を作ることができtoggleます。概念は次のとおりですdisplay。最初の要素の属性が「block」の場合、それを「none」に変更し、後者を「block」に変更します。およびその逆。ここにあります：

function toggle() {

    if ( first.style.display === "block" ) {

        first.style.display = "none";
        second.style.display = "block";

    } else { // switch back

        first.style.display = "block";
        second.style.display = "none";

    }

}

次に、HTMLでイベントハンドラーを次のように設定します。

<button id="first" onclick="toggle();">First</button>
<button id="second" onclick="toggle();">Second</button>

または、JSを使用してそれを行うことができます：

first.onclick = toggle;
second.onclick = toggle;

私は2番目の方が好きです、私たちはそれに固執します、

そして、あなたはそれを持っています。ここで実用的な例を見つけることができます-http://jsfiddle.net/twEK5/

于 2012-11-15T23:53:00.760 に答える