Soru Yorum yapmadan bir div görünmez nasıl yapılır?


Yorum yapmadan bir div görünmez yapmak mümkün mü? Öyleyse nasıl?


25
2018-06-12 08:29


Menşei


Neden göstermek istemediğin bir div istiyorsun? Bu bilgi cevap için yararlı olabilir. - Tasawer Khan
@Taz: Bu iyi bir nokta ama ben sadece alternatifi ile devam ettim. Sadece OP, bunları gerçekten tamamen kaldırması gerekip gerekmediğini veya daha sonra geri almak için gizleyip saklamayacağını bilir. - Sarfraz


Cevaplar:


Bunu CSS ile gizlemelisiniz:

div {                    /* this will hide all divs on the page */
  display:none;
}

Belirli bir sınıfa veya kimliğe sahip belirli bir div ise, aşağıdaki gibi gizleyebilirsiniz:

<div class="div_class_name">Some Content</div>

CSS:

div.div_class_name {     /* this will hide div with class div_class_name */
  display:none;
}

Veya

<div id="div_id_name">Some Content</div>

CSS:

div#div_id_name {        /* this will hide div with id div_id_name */
  display:none;
}

Not: CSS tyles'i arasında sarmalısın <style type="text/css"></style> etiketler, örnek:

<style type="text/css">
  div#div_id_name {
    display:none;
  }
</style>

Daha fazla bilgi :)


29
2018-06-12 08:30



Mesajınızı düzeltmek için iki kez düzenledim div.div_id_name yazım hatası ve üzerinde düzenlediğiniz her zaman: P ... pes ediyorum: P - Matt
@Matt: Evet, sınıftan kopyala yapıştır uygulamasında farketmediniz. Güncellenmiş. Teşekkürler :) - Sarfraz


Bunu inline tarzı ile yapabilirsiniz

<div style="display:none"></div>

veya CSS Style'ı tanımlayarak Css'de ekle

.HideableDiv{display:none;}

ve HTML yazarken

<div class="HideableDiv" ></div>

11
2018-06-12 08:49





Bu kolay. İhtiyacınız olan tek şey, aşağıdaki örnek gösterileri gibi bir stil ekleyerek:

CSS:

<style type="text/css">
    div.myInvisibleDiv {
        overflow: hidden;
        visibility: hidden;
        height: 0;
        width: 0;
    }
</style>

HTML:

<div class="myInvisibleDiv"><p>My invisible content</p></div>

Bu div ve içeriği kesinlikle gösterilmiyor ve çevreleyen unsurları rahatsız etmiyor.


9
2018-06-12 08:33





Eğer esas olarak düzeninizden çıkmasını istiyorsanız:

.element_class {
 display:none;
}

sadece görünmez yapmak istiyorsanız (ama yine de boşluk gibi görünmekle kalmaz)

.element_class {
 visibility: hidden;
}

ve sonra öğeniz (eğer bir div) şöyle görünürdü:

<div class="element_class"></div>

Temel olarak, class = "element_class" ifadesini eklediğinizde, görünmez veya tamamen gizlenir.


5
2018-06-13 20:53





position: absolute;
left: -99999px; /* big number */

İçeriği çoğu ekran okuyucuya erişilebilir yapacak, ancak öğeyi ekran dışı hale getirecektir.


0
2018-06-13 17:58



Tarayıcı hala düşünmek zorunda değil mi? "display: none" ifadesini kullanmak çok daha iyi ve daha az kafa karıştırıcı bir yöntemdir - Stefan
Neden aşağı oy? Sadece kafa karıştırıcı olduğunu düşündüğünüz için önerim kötü ya da yardımcı olmadığı anlamına gelmez. Aslında, erişilebilirlik ile uğraştığınızda, iyi bilinen standart bir yöntemdir. Bağlı olarak niye ya bilgileri gizlemek, bilgilerin ne olduğunu ve çubuğu ne kadar yükseğe ayarladığınızı, önerinin aslında görüntülenmesini tercih ederim: yok. - Adam Asham
Üzgünüm, bence bu düşüşün amacını yanlış anladım. Beni affet? - Stefan
Sadece bir karışıklık. Görüntülemeyi istemiyorsak. Okuyucuyu erişilebilirlik veya bir şey için taramak mümkün olmalıdır. - Tasawer Khan
Bir gezinme bağlantısı belki de iyi bir göz görüşüne sahip olanlar için kullanışlı değildir, ancak bir ekran okuyucu kullanıcısı için gezinmek için bir sayfa daha kolaylaştırır. - Adam Asham


Olabilir, bu gerekli çözüm değil, ancak bu tür sorunları bu küçük hilelerle çözebilirsiniz.

Kullanabilirsiniz jQuery Çözüme ulaşmak için. Eğer tamamen saklamak / göstermek istiyorsanız divo zaman kullanabilirsiniz:

$('#my_element').show()
$('#my_element').hide()

Veya divunuzun görünmez hale gelmesini ve sayfada hala görünmesini istiyorsanız, o zaman verimli bir hile kullanabilirsiniz:

$('#my_element').css('opacity', '0.0');    // invisible Maximum
$('#my_element').css('opacity', '1.0');   // visible maximum

0
2018-01-25 05:13