jQuery deaktivieren Button Verhalten einmal ausgewählt

Question

Ich habe zwei Tasten nebeneinander, die einzelnen Bits des Inhalts unten öffnen, aber ich möchte die Schaltfläche mit dem sichtbaren Bit des Inhalts nichts tun, sobald Sie es erneut ausgewählt.

In dem Moment, in dem die Schaltfläche erneut angeklickt wird, wird der Inhalt geschlossen. (Grundsätzlich muss immer Inhalt angezeigt werden.)

Ist es auch möglich, den First Button-Inhalt als Standard geöffnet zu lassen? Hier

ist der Code: https://jsfiddle.net/0ptdm8qs/2/

Irgendwelche Vorschläge geschätzt!

Answer 1

Sie können den gesamten Toggle-Code entfernen, die Klasse .buttonactive zu .firstbutton hinzufügen und display: block; zuerst.

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