如何顯示一個div並隱藏所有其他div

Question

我想在每個按鈕上單擊顯示一個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/

Answer 1

通過隱藏所有其他div的，則顯示你想要顯示的一個剛開始。

$​('#w').live('click', function(){ 
    $('div').hide(); 
    $('#a').show(); 
}); 

Answer 2

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); 

Answer 3

在你的jsfiddle，你正在使用jQuery 1.7.2。如果您在真實應用中使用此版本，您應該使用而不是使用$.live()，但使用$.on()而不是 - 前者不贊成使用後者。

解決您的問題。將包裝容器中的兩個的按鈕和申報單，並使用$.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中，您只需將一個委託事件綁定到按鈕容器。我會在這種情況下使用$.on()：

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

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

Here是一個演示。

上述方法不必使用ID和其他屬性，但是如果您需要容器中的其他元素，則需要小心，因爲如果您這樣做，$.index()將開始失敗。

Answer 4

如果正確理解你，應該只是在顯示你的特定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'); 
    }); 

​ 

Answer 5

試試這個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() 
}); 

Answer 6

添加一個類來所有的u要顯示或隱藏 如的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/

Answer 7

檢查演示http://jsfiddle.net/6UcDR/2/這是你想要達到的目的。