一旦选择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>