jQuery 选择后禁用按钮行为

Question

我有两个并排的按钮，可以打开下面的单独内容，但是我希望与可见内容相关联的按钮在您再次选择它后不执行任何操作。

再次点击按钮的瞬间，内容关闭。（基本上总要有内容展示。）

另外，是否可以默认打开第一个按钮内容？

感谢任何建议！

$(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 class 添加到 .firstbutton 并设置 display: block; #first.

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

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

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

#container {
 float: left;
 display: inline;
 background: #fff;
 height: auto;
}
#first {
 display: block;
 width: 500px;
 height: 300px;
 background-color: #EC644B;
 color: #fff;
 font-family: Arial;
 font-size: 30px;
 text-align: center;
}
#second {
 display: none;
 width: 500px;
 height: 300px;
 background-color: #446CB3;
 color: #fff;
 font-family: Arial;
 font-size: 30px;
 text-align: center;
}
.button {
 width: 250px;
 display: inline-block;
 clear: both;
 margin: 10px 0;
 font-size: 24px;
 font-family: Arial;
 font-weight: 300;
 line-height: 49px;
 text-align: center;
 color: #fff;
 cursor: pointer;
}
.firstbutton {
 background-color: #EC644B;
}
.secondbutton {
 background-color: #446CB3;
}
.buttonactive {
 color: #000;
 background-color: #fff;
 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">
    
 <span class="button firstbutton buttonactive">First Button</span>
 <span class="button secondbutton">Second Button</span>
  
 <div id="first">ONE</div>
 <div id="second">TWO</div>
    
 </div>

jQuery 选择后禁用按钮行为

jQuery disable button behaviour once selected

jquery

button

toggle