一旦選擇jQuery禁用按鈕行爲

Question

我有兩個並排按鈕，打開下面的內容的單獨位，但是我希望與可見位的內容關聯的按鈕，一旦你再次選擇它什麼也不做。

當再次點擊按鈕時，內容關閉。 （基本上總是需要顯示內容。）

此外，是否有可能將第一個按鈕的內容默認打開？

下面是代碼：https://jsfiddle.net/0ptdm8qs/2/

任何建議表示讚賞！

$(document).ready(function(){ 
$('.firstbutton').click(function(){ 
    if($('#first').is(':visible')) { 
     $('#first').hide(); 
    } 
    else { 
    $('#second').hide(); 
    $('#first').fadeIn(); 
    } 
}); 
}); 
$(document).ready(function(){ 
$('.secondbutton').click(function() { 
    if ($('#second').is(':visible')) { 
      $('#second').fadeOut(); 
     if ($("#second").data('lastClicked') !== this) { 
      $('#second').fadeIn(); 
     } 
    } 
    else { 
     $('#first').hide(); 
     $('#second').fadeIn(); 
    } 
    $("#second").data('lastClicked', this); 
}); 
}); 

$(document).ready(function(){ 
$('.button').click(function() { 
    $('.button').not(this).removeClass('buttonactive'); 
    $(this).toggleClass('buttonactive'); 
}); 
}); 

Answer 1

您可以刪除所有切換代碼，將.buttonactive類添加到.firstbutton並設置display：block;爲#first。

$(document).ready(function(){ 
 
    $('.firstbutton').click(function(){ 
 
     $('#second').hide(); 
 
     $('#first').fadeIn();   
 
    }); 
 
}); 
 

 
$(document).ready(function(){ 
 
\t $('.secondbutton').click(function() { 
 
\t \t \t $('#first').hide(); 
 
\t \t \t $('#second').fadeIn(); \t \t 
 
     $("#second").data('lastClicked', this); 
 
\t }); 
 
}); 
 

 
$(document).ready(function(){ 
 
    $('.button').click(function() { 
 
     $(this).addClass('buttonactive'); 
 
     $('.button').not(this).removeClass('buttonactive');   
 
    }); 
 
});

#container { 
 
\t float: left; 
 
\t display: inline; 
 
\t background: #fff; 
 
\t height: auto; 
 
} 
 
#first { 
 
\t display: block; 
 
\t width: 500px; 
 
\t height: 300px; 
 
\t background-color: #EC644B; 
 
\t color: #fff; 
 
\t font-family: Arial; 
 
\t font-size: 30px; 
 
\t text-align: center; 
 
} 
 
#second { 
 
\t display: none; 
 
\t width: 500px; 
 
\t height: 300px; 
 
\t background-color: #446CB3; 
 
\t color: #fff; 
 
\t font-family: Arial; 
 
\t font-size: 30px; 
 
\t text-align: center; 
 
} 
 
.button { 
 
\t width: 250px; 
 
\t display: inline-block; 
 
\t clear: both; 
 
\t margin: 10px 0; 
 
\t font-size: 24px; 
 
\t font-family: Arial; 
 
\t font-weight: 300; 
 
\t line-height: 49px; 
 
\t text-align: center; 
 
\t color: #fff; 
 
\t cursor: pointer; 
 
} 
 
.firstbutton { 
 
\t background-color: #EC644B; 
 
} 
 
.secondbutton { 
 
\t background-color: #446CB3; 
 
} 
 
.buttonactive { 
 
\t color: #000; 
 
\t background-color: #fff; 
 
\t border-bottom: 5px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/jquery-2.0.0b1.js"></script> 
 
    
 
    <div id="container"> 
 
    
 
\t <span class="button firstbutton buttonactive">First Button</span> 
 
\t <span class="button secondbutton">Second Button</span> 
 
    
 
\t <div id="first">ONE</div> 
 
\t <div id="second">TWO</div> 
 
    
 
\t </div>