选择后jQuery禁用按钮行为

Question

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

再次单击该按钮时，内容将关闭。 （基本上总是需要显示内容。）

此外，是否可以将First Button内容打开为默认值？

以下是代码：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。

＆＃13;

＆＃13;

$(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');        
    });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;