點擊顯示'Div 1'並隱藏'Div 2'＆點擊單獨按鈕顯示'Div 2'並隱藏'Div 1'？

Question

我試圖讓2個單獨的按鈕工作，以便如果你點擊一個按鈕它顯示'Div 1'並隱藏'Div 2'，並且如果你點擊一個單獨的按鈕它顯示'Div 2'並隱藏'Div 1 」。

我不偉大與jQuery或JS所以只能走到這一步......

jsfiddle

$('.button-1').click(function() { 
    var i = $(this).index(); 
    $('.div-2').hide(); 
    $('.div-1' + (i+1)).show(); 
}); 

任何幫助，將不勝感激！

Answer 1

$('.button-1').click(function() { 
    $('.div-2').hide(); 
    $('.div-1').show(); 
}); 

$('.button-2').click(function() { 
    $('.div-1').hide(); 
    $('.div-2').show(); 
}); 

Answer 2

不需要+ (i + 1)。只需隱藏div-1並顯示div-2，反之亦然，具體取決於哪個按鈕被點擊。

$('.button-1').click(function() { 
 
     $('.div-2').hide(); 
 
     $('.div-1').show(); 
 
}); 
 
$('.button-2').click(function() { 
 
     $('.div-1').hide(); 
 
     $('.div-2').show(); 
 
});

.boxes { 
 
    height: 100px;  
 
} 
 

 
.div-1 { 
 
    background-color: red; 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
} 
 

 
.div-2 { 
 
    background-color: blue; 
 
    width: 60px; 
 
    height: 60px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 

 
button { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="boxes"> 
 
    <div class="div-1">Div 1</div> 
 
    <div class="div-2">Div 2</div> 
 
</div>  
 

 
<button class="button-1">Button 1</button> 
 
<button class="button-2">Button 2</button>

Answer 3

你可以這樣做：

$('.button-1').click(function() { 

    $('.div-2').hide(); 
    $('.div-1').show(); 
}); 

$('.button-2').click(function() { 

    $('.div-1').hide(); 
    $('.div-2').show(); 
}); 

http://jsfiddle.net/yjx85ra0/

Answer 4

隱藏兩個框，然後顯示一個你想要的：

$('.button-1, .button-2').click(function() { 
    $('.boxes > div').hide(); 
    $('.div-' + $(this).index()).show(); 
}); 

Fiddle