jQueryは一度選択されたボタンの動作を無効にします

Question

私は2つのボタンを並べて別々のビットを開いていますが、コンテンツの目に見えるビットに関連付けられたボタンは、

ボタンをもう一度クリックすると、コンテンツが閉じます。 （基本的には常にコンテンツが表示されている必要があります）

また、最初のボタンのコンテンツをデフォルトで開くことはできますか？ 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>