jquery顯示/隱藏點擊和默認功能

Question

我對jquery很新，我需要你的幫助！ 我試圖讓一個默認的選項1自動顯示，我真的不知道如何完成它。 HTML代碼中的三個按鈕應該像開關一樣使用，並且每個按鈕都會在div內顯示其他其他內容。但是，我無法找到正確的方式將第一個選項顯示爲默認選項，即使沒有單擊按鈕也可以進行顯示。

我希望「完整」div的內容首先顯示爲默認內容，我需要使用按鈕顯示/隱藏它。

請幫助我以正確的方式解決此問題。

HTML：

<div class="btn-group"> 
    <button type="button" id="option1">full</button> 
    <button type="button" id="option2">empty</button> 
    <button type="button" id="option3">new</button> 
</div>  

<div id="show-div"> 
    <div id="full"> 
     <p>This full should be default</p> 
    </div> 
    <div id="empty"> 
     <p>This is empty</p>     
    </div> 
    <div id="new"> 
     <p>this is another option</p>    
    </div> 
</div> 

的Jquery：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('button[type="button"]').click(function() { 
     if($(this).attr('id') == 'option1') { 
      $('#show-div').show(); 
      $('#full').show(); 
      $('#units').show(); 
      $('#empty').hide(); 
      $('#new').hide();   
     } 

     else if($(this).attr('id') == 'option2') { 
      $('#show-div').show(); 
      $('#full').hide(); 
      $('#empty').show(); 
      $('#new').hide(); 
     } 
     else if($(this).attr('id') == 'option3') { 
      $('#show-div').show(); 
      $('#full').hide(); 
      $('#empty').hide(); 
      $('#new').show(); 
     } 
     else { 
      $('#show-div').show(); 
      $('#full').show(); 
      $('#default').show(); 
     } 
    }); 
}); 
</script> 

Answer 1

您可以縮短你的代碼是這樣的：

$(document).ready(function() { 
    $("#empty, #new").hide(); 
    $('button[type="button"]').click(function() { 
     $('#show-div').show(); 
     $('#' + this.innerHTML).show().siblings().hide(); 
     $('#units').show(); 
    }); 
}); 

DEMO

Answer 2

試試如下

$(document).ready(function() { 
    $('button[type="button"]').click(function() { 
     if($(this).attr('id') == 'option1') { 
     $('div').not(".btn-group").hide(); 
      $('#show-div').show(); 
      $('#full').show(); 
      $('#units').show(); 

     } 

     else if($(this).attr('id') == 'option2') { 
      $('div').not(".btn-group").hide(); 
      $('#show-div').show(); 
      $('#empty').show(); 
     } 
     else if($(this).attr('id') == 'option3') { 
      $('div').not(".btn-group").hide(); 
      $('#show-div').show(); 
      $('#new').show(); 
     } 
     else { 
      $('#show-div').show(); 
      $('#full').show(); 
      $('#default').show(); 
     } 
    }); 
}); 

Demo

Update Demo

Answer 3

添加顯示沒有到要隱藏

<div class="btn-group"> 
    <button type="button" id="option1">full</button> 
    <button type="button" id="option2">empty</button> 
    <button type="button" id="option3">new</button> 
</div>  

<div id="show-div"> 
    <div id="full"> 
     <p>This full should be default</p> 
    </div> 
    <div id="empty" style="display:none"> 
     <p>This is empty</p>     
    </div> 
    <div id="new" style="display:none"> 
     <p>this is another option</p>    
    </div> 
</div> 

檢查這個小提琴的div：

JSFIDDLE

Answer 4

您可以使用CSS或jQuery的像下面

CSS

#empty #new{display:none;} 

DEMO with CSS

或使用jQuery

<script type="text/javascript"> 
$(document).ready(function() { 
    //hide empty and new 
    $('#empty').hide(); 
    $('#new').hide(); 

    $('button[type="button"]').click(function() { 
     if($(this).attr('id') == 'option1') { 
      $('#show-div').show(); 
      $('#full').show(); 
      $('#units').show(); 
      $('#empty').hide(); 
      $('#new').hide();   
     } 

     else if($(this).attr('id') == 'option2') { 
      $('#show-div').show(); 
      $('#full').hide(); 
      $('#empty').show(); 
      $('#new').hide(); 
     } 
     else if($(this).attr('id') == 'option3') { 
      $('#show-div').show(); 
      $('#full').hide(); 
      $('#empty').hide(); 
      $('#new').show(); 
     } 
     else { 
      $('#show-div').show(); 
      $('#full').show(); 
      $('#default').show(); 
     } 
    }); 
}); 
</script> 

DEMO with jQuery

Answer 5

嘗試像下面...

$(document).ready(function() { 
     $('#show-div').show(); 
     $('#full').show(); 
     $('#empty').hide(); 
     $('#new').hide();  

    $('button[type="button"]').click(function() { 
    if($(this).attr('id') == 'option1') { 
     $('#show-div').show(); 
     $('#full').show(); 
     $('#units').show(); 
     $('#empty').hide(); 
     $('#new').hide();   
    } 

    else if($(this).attr('id') == 'option2') { 
     $('#show-div').show(); 
     $('#full').hide(); 
     $('#empty').show(); 
     $('#new').hide(); 
    } 
    else if($(this).attr('id') == 'option3') { 
     $('#show-div').show(); 
     $('#full').hide(); 
     $('#empty').hide(); 
     $('#new').show(); 
    } 
    else { 
     $('#show-div').show(); 
     $('#full').show(); 
     $('#default').show(); 
    } 
}); 
}); 

這裏是小提琴... http://jsfiddle.net/w9p5ck6o/