Göster/Gizle div gibi bir alt div ile bir div göstermek/gizlemek yapabilirsiniz Nasıl JavaScript

Question

tıklayın ve , btnimages'u tıklattığımda, sekme simgesi gizlendiğinde sekme görüntüleri açılır/gösterilir.

Answer 1

Hangi düğmenin tıklatılacağını gösteren div tanımlayarak basit jquery ile yapın. Bu div göstermek ve düğme tıklama kullanımı ile ilgili başka bir div gizlemek isterseniz

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

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

bu

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

bu deneyin: grubuna display:none kaldırmak zorunda Bunun gibi ebeveyn div tüm çocuk unsurlarını gizleyecektir. düğme işleyicisi oluşturma ve aşağıda gösterildiği gibi .show() ve .hide() yöntemleri kullanın -

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

yerine saklanıyorsun elemanları doğrudan "gizli" özellikleri ayarlayarak/görüntüleme, üst kapsayıcıya sınıf ekleyerek ve kaldırarak özellikleri ayarlayabilir. "gruptan".

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

Eğer gösterecektir üst kabına göre sınıf eklemek Bu şekilde aktif oğul birine sahip dayanan üst konteynere gizler. Etkin olarak ayarladığınız mevcut çocuk, ana kapsayıcıda hangi sınıfların etkin olduğuna bağlı olarak da görünür olacaktır.

Childs'ın hiçbiri etkin değilse, ana kapsayıcı gizlenir.