Show/Hide div mit Unter div mit der Taste klicken Sie JavaScript

Question

Wie kann ich ein div zeigen/verstecken mit einem Unter div machen wie:

<div class="form-group" style="display:none;"> 
    <div id="tabicon" style="display:none;"> 
     <span>ICON</span> 
    </div> 
    <div id="tabimages" style="display:none;"> 
     <span>IMAGES</span> 
    </div> 
</div> 

<div id="button_tab"> 
    <input type="button" name="btnicon" value="icon"> 
    <input type="button" name="btnimages" value="images"> 
</div> 

So dass, wenn ich btnicon klicken, wird die Registerkarte Symbol geöffnet wird/angezeigt und Wenn ich auf btnimages klicke, wird die Registerkarte Bilder geöffnet/angezeigt, mit dem Tab-Symbol ausgeblendet?

Answer 1

Tun Sie es mit einfachen jquery, indem Sie definieren, welches div auf welcher Schaltfläche angezeigt werden soll.

$('btnicon').on('click', function(){ 
    $('#tabicon,.form-group').show(); 
}); 

$('btnicon').on('click', function(){ 
    $('#tabimages,.form-group').show(); 
}); 

Wenn Sie diese div zeigen wollen und andere div auf den Knopf klicken Gebrauch verstecken diese

$('btnicon').on('click', function(){ 
    $('#tabicon,.form-group').show(); 
    $('#tabimages').hide(); 
}); 

$('btnicon').on('click', function(){ 
    $('#tabimages,.form-group').show(); 
    $('#tabicon').hide(); 
}); 

Answer 2

$('input[name=btnicon]').click(function(){//icon click 
 
$('#tabicon').show()//show icon div 
 
$('#tabimages').hide()//hide image div 
 

 
}).click()//manually call click to show icon div on load 
 
$('input[name=btnimages]').click(function(){//image click 
 
$('#tabicon').hide()//hide icon div 
 
$('#tabimages').show()//show image div 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <div id="tabicon" style="display:none;"> 
 
     <span>ICON</span> 
 
    </div> 
 
    <div id="tabimages" style="display:none;"> 
 
     <span>IMAGES</span> 
 
    </div> 
 
</div> 
 

 
<div id="button_tab"> 
 
    <input type="button" name="btnicon" value="icon"> 
 
    <input type="button" name="btnimages" value="images"> 
 
</div>

Answer 3

Try this: Sie haben display:none zu entfernen Elternteil, da dies alle untergeordneten Elemente ausblenden wird. Schaltfläche Erstellen Handler und verwenden .show() und .hide() Methoden wie unten gezeigt -

HTML:

<div class="form-group"> 
    <div id="tabicon" style="display:none;"> 
     <span>ICON</span> 
    </div> 
    <div id="tabimages" style="display:none;"> 
     <span>IMAGES</span> 
    </div> 
</div> 

<div id="button_tab"> 
    <input type="button" name="btnicon" value="icon"> 
    <input type="button" name="btnimages" value="images"> 
</div> 

jQuery:

$(function(){ 
    $('input[name="btnicon"]').click(function(){ 
     $('#tabicon').show(); 
     $('#tabimages').hide(); 
    }); 
    $('input[name="btnimages"]').click(function(){ 
     $('#tabicon').hide(); 
     $('#tabimages').show(); 
    }); 
}); 

Answer 4

Statt Einstellung der "versteckte" Eigenschaften direkt auf die Elemente, die Sie verstecken Sie können die Eigenschaften festlegen, indem Sie Klassen zum übergeordneten Container hinzufügen und daraus entfernen. "Gruppe formen".

.parent-class, #tabicon, #tabimage { 
    display: none; 
} 

.parent-class.icon-class, .parent-class.image-class { 
    display: block; 
} 

.parent-class.icon-class #tabicon{ 
    display: block; 
} 

.parent-class.image-class #tabimage { 
    display: block; 
} 

diese Weise, wenn Sie die Klasse in den übergeordneten Container hinzufügen, werden Sie verbergen den übergeordneten Container auf sie mit einer der Childs aktiven Basis zeigen. Das aktuelle untergeordnete Element, das Sie aktiviert haben, wird ebenfalls angezeigt, je nachdem, welche Klassen im übergeordneten Container aktiv sind.

Wenn keine der untergeordneten Objekte aktiv ist, wird der übergeordnete Container ausgeblendet.