1

ボタンをクリックするたびにdivを表示し、他のすべてのdivを非表示にします。

HTML

<div id=a style="display:none">1</diV>
<div id=b style="display:none">2</diV>
<div id=c style="display:none">3</diV>
<div id=d style="display:none" >4</diV>

<input type=button value=1 id=w>
<input type=button value=2 id=x>
<input type=button value=3 id=y>
<input type=button value=4 id=z>

jQuery

$​('#w').live('click', function () {
    $('#a').css('display', 'block');
});

$('#x').live('click', function () {
    $('#b').css('display', 'block');
});

$('#y').live('click', function () {
    $('#c').css('display', 'block');
});

$('#z').live('click', function () {
    $('#d').css('display', 'block');
});

http://jsfiddle.net/6UcDR/

4

7 に答える 7

3

JSFiddleでは、jQuery1.7.2を使用しています。実際のアプリでこのバージョンを使用している場合は、を使用するべきではありません$.live()が、代わりに使用してください$.on()。前者は非推奨であり、後者が優先されます。

問題を解決する最も簡単でクリーンな方法は、ボタンとdivの両方をコンテナーにラップし$.index()、ボタンをdivに関連付けるために使用することです。

<div class="showThese">
    <div id="a" style="display:none">1</div>
    <div id="b" style="display:none">2</div>
    <div id="c" style="display:none">3</div>
    <div id="d" style="display:none" >4</div>
</div>

<div class="buttons">
    <input type="button" value="1" id="w">
    <input type="button" value="2" id="x">
    <input type="button" value="3" id="y">
    <input type="button" value="4" id="z">
</div>

上記のHTMLのように、属性は引用符で囲む必要があることに注意してください。

次に、JavaScriptでは、委任されたイベントを1つだけボタンコンテナにバインドする必要があります。この場合に使用$.on()します：

$('div.buttons').on('click', 'input', function() {
    var divs = $('div.showThese').children();

    divs.eq($(this).index()).show().siblings().hide();
});

これがデモです。

上記の方法では、IDやその他の属性を使用する必要がなくなりますが、コンテナに他の要素が必要な場合は注意が必要です。使用$.index()すると失敗し始めます。

于 2012-06-08T10:20:03.843 に答える
2

他のすべてのdivを非表示にしてから、表示したいdivを表示することから始めます。 

$​('#w').live('click', function(){
    $('div').hide();
    $('#a').show();
});
于 2012-06-08T10:15:33.383 に答える
1

live非推奨です、使用on

$​('input').on('click', function(){

    var index = $(this).index();
    $('div').hide().eq(index).show();

});

jQuery.comの例：

function notify() { alert("clicked"); }
$("button").on("click", notify);
于 2012-06-08T10:18:15.277 に答える
1

正しく理解している場合は、特定のdivを表示する前に、divにdisplay：noneを設定するだけです。

    $('#w').live('click', function(){
        $('div').css('display','none');
        $('#a').css('display','block');

    });

    $('#x').live('click', function(){
         $('div').css('display','none');
        $('#b').css('display','block');
    });

    $('#y').live('click', function(){
         $('div').css('display','none');
        $('#c').css('display','block');
    });

    $('#z').live('click', function(){
         $('div').css('display','none');
        $('#d').css('display','block');
    });

​
于 2012-06-08T10:20:09.137 に答える
1

デモを確認してくださいhttp://jsfiddle.net/6UcDR/2/これはあなたが達成したいことですか。

于 2012-06-08T10:36:10.590 に答える
0

このjQueryを試してください-

$​('#w').click(function(){
$('#a').show()
$('#b,#c,#d').hide()
});

$('#x').click(function(){
$('#b').show();
$('#a,#c,#d').hide()
});

$('#y').click(function(){
$('#c').show();
$('#b,#a,#d').hide()
});

$('#z').click(function(){
$('#d').show();
$('#b,#c,#d').hide()
});
于 2012-06-08T10:22:14.543 に答える
0

表示または非表示にするすべてのdivにクラスを追加します。例：

<div id=a class="hide" style="display:none">1</diV>

次に、各onclick関数に次のステートメントを追加します

 $('.hide').css('display','none'); /* Replace .hide with whatever class name u have chosen*/

実行中の回答を確認するには：http：//jsfiddle.net/6UcDR/1/

于 2012-06-08T10:22:53.457 に答える