Hide div bei Klick und zeige ein anderes div?

Question

Ich habe ein Bootstrap-Modal. In diesem Modal gibt es zwei Bootstrap-Registerkarten. Die Schaltfläche "Arbeit" ist die aktive Registerkarte. Die Schaltfläche "Mieten" ist die andere Registerkarte. Diese modale eingewickelt mit .col-md-8-Klasse mit diesen Arten

@media (min-width: 992px) { 
    .col-md-8 { 
     width: 87%; 
     margin-top: 37px; 
     margin-bottom: 31px; 
    } 
    } 

Das Problem ist, dass der „Hire“ Registerkarte Inhalt eine höhere Breite als „Arbeit“ Inhalt hat. Also sieht es in seine Richtung.

ich brauche "Hire" Tab ursprüngliche Breite zu zeigen, wenn jemand auf "Hire" -Reiter. Ich weiß, dass dies passiert ist, weil ich mit der Klasse .col-md-8 gewickelt habe. Haben Sie keine Option, diese Hauptklasse beim Klicken auszublenden und die ursprüngliche Breite der "Hire" -Registerkarte anzuzeigen? Ich benutze Meteor und reagiere.

Answer 1

Sie können Breite modal-Dialog erhöhen durch Hinzufügen class.you Klassemodal-lg hinzufügen können. Dann können Sie die Breite des Modales erweitern, wenn Sie auf die Registerkarte "Mieten" klicken.

Answer 2

Wenn Sie dies erreichen möchten, ist der beste Weg, jquery zu verwenden.

Sie müssen ID zur Arbeit geben, Knopf und Arbeitsinhalt und Miet-Inhalt einstellen.

für z.B.

HTML:

<button id="work-btn">Work</button> <button id="hire-btn">Hire</button> 
<div id="work-content"> The content goes here </div> 
<div id="hire-content"> The content goes here </div> 

CSS:

.hire-content { 
display:none; 
} 

JQuery:

$(document).ready(function(){ 
$("#hire-btn").click(function() { 
    $("#work-content").hide(); 
    $("#hire-content").show(); 
}); 
}); 

Hoffnung, das hilft. Wenn Sie Fragen haben, zögern Sie nicht zu fragen.