JavaScript kullanarak 'div' gösterme / gizleme

185

Yaptığım bir web sitesi için, bir div yüklemek ve diğerini gizlemek, ardından JavaScript kullanarak div arasında görünümler arasında geçiş yapacak iki düğme var.

Bu benim mevcut kodum

function replaceContentInContainer(target, source) {
  document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}

function replaceContentInOtherContainer(replace_target, source) {
  document.getElementById(replace_target).innerHTML = document.getElementById(source).innerHTML;
}
<html>
<button onClick="replaceContentInContainer('target', 'replace_target')">View Portfolio</button>
<button onClick="replaceContentInOtherContainer('replace_target', 'target')">View Results</button>

<div>
  <span id="target">div1</span>
</div>

<div style="display:none">
  <span id="replace_target">div2</span>
</div>
Snippet'i genişlet

Div2'nin yerini alan ikinci işlev çalışmıyor, ancak ilki çalışıyor.

javascript  html  onclick 
— Jake Ols
kaynak

Yanıtlar:

430

Bir öğeyi gösterme veya gizleme:

Bir öğeyi göstermek veya gizlemek için öğenin style özelliğini kullanın . Çoğu durumda, muhtemelen öğenin displayözelliğini değiştirmek istersiniz :

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

Alternatif olarak, öğenin yine de yer kaplamasını istiyorsanız (bir tablo hücresini gizleyeceğiniz gibi), bunun yerine öğenin visibilityözelliğini değiştirebilirsiniz :

element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show

Bir öğe koleksiyonunu gizleme:

Bir öğe koleksiyonunu gizlemek istiyorsanız, her öğenin üzerinde tekrarlayın ve öğenin şu şekilde displaydeğiştirin none:

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));

Kod snippet'ini göster

Bir öğe koleksiyonu gösteriliyor:

Çoğu zaman, muhtemelen display: noneve arasında geçiş yapacaksınız display: block, yani bir öğe koleksiyonu gösterirken aşağıdakiler yeterli olabilir .

displayVarsayılan olarak olmasını istemiyorsanız , isteğe bağlı olarak ikinci argüman olarak istediğinizi belirtebilirsiniz block.

function show (elements, specifiedDisplay) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = specifiedDisplay || 'block';
  }
}

// Usage:
var elements = document.querySelectorAll('.target');
show(elements);

show(elements, 'inline-block'); // The second param allows you to specify a display value

Kod snippet'ini göster

Alternatif olarak, eleman (lar) ı göstermek için daha iyi bir yaklaşım display, başlangıçtaki haline geri döndürmek için yalnızca satır içi stili kaldırmaktır . Ardından, displaybasamaklı bir kural tarafından gizlenip gizlenmediğini belirlemek için öğenin hesaplanan stilini kontrol edin . Öyleyse, öğeyi gösterin.

function show (elements, specifiedDisplay) {
  var computedDisplay, element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index < elements.length; index++) {
    element = elements[index];

    // Remove the element's inline display styling
    element.style.display = '';
    computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');

    if (computedDisplay === 'none') {
        element.style.display = specifiedDisplay || 'block';
    }
  }
}

Kod snippet'ini göster

(Bir adım daha ileri götürmek isterseniz, jQuery'nin ne yaptığını taklit edebilir ve öğeyi boş iframe(çakışan bir stil sayfası olmadan) ekleyerek öğenin varsayılan tarayıcı stilini belirleyebilir ve ardından hesaplanan stili alabilirsiniz. displayöğenin gerçek başlangıç özellik değerini bilecek ve istenen sonuçları elde etmek için bir değeri kodlamak zorunda kalmayacaksınız.)

Ekranı değiştirme:

Benzer şekilde, displaybir öğenin veya öğe koleksiyonunun geçişini yapmak isterseniz, her öğenin üzerinde yineleme yapabilir ve displayözelliğin hesaplanan değerini kontrol ederek görünür olup olmadığını belirleyebilirsiniz . Görünür ise, set displayiçin noneaksi satır içi kaldırmak displaystil ve hala gizli eğer, set display, belirli bir değere veya kodlanmış varsayılan block.

function toggle (elements, specifiedDisplay) {
  var element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index < elements.length; index++) {
    element = elements[index];

    if (isElementHidden(element)) {
      element.style.display = '';

      // If the element is still hidden after removing the inline display
      if (isElementHidden(element)) {
        element.style.display = specifiedDisplay || 'block';
      }
    } else {
      element.style.display = 'none';
    }
  }
  function isElementHidden (element) {
    return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
  }
}

// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
  toggle(document.querySelectorAll('.target'));
});

Kod snippet'ini göster

— Josh Crozier
kaynak
97

JQuery JavaScript çerçevesini de kullanabilirsiniz :

Div Bloğunu Gizlemek için

$(".divIDClass").hide();

Div Bloğunu göstermek için

$(".divIDClass").show();
— IMRUP
kaynak
17
Soru, jQuery
— MLeFevre
53
Bu da aşağı oy için bir neden değil. soru özellikle jquery kullanmamanızı söylemez ve cevapları görüntülemek için buraya gelen diğer kişilerin yanı sıra OP ile aynı kısıtlamalara sahip olmayabilir.
— Kinjal Dixit
5
@KinjalDixit IMRUP, cevabının vanilya JS kullanmadığını ve bunun yerine jQuery'yi kullandığına dair bir not eklemek istiyorsa, orijinal soru jQuery için etiketlenmemiş olsa bile, bazı değerlere sahip olacaktır / hatta jQuery'den bahsediyor. Şu anda olduğu gibi, bir kütüphanenin bunu yapmadan bahsetmeden bir cevap, çok az (muhtemelen gerekli olan her şey olsa da) açıklama ve bir seçicinin kafa karıştırıcı kullanımını ( kimlik belirlerken sınıf seçiciyi kullanarak ?) Şu anda olduğu gibi, bu soruya cevap vermenin yararlı olduğunu düşünmüyorum.
— MLeFevre
3
Bir jQuery örneği eklerken (ki bu tamamen geçerli bir yaklaşımdır IMHO) lütfen karşılaştırma için bir vanilya JS örneği de sağlayın ve OP'ye farkı açıklayın. Birçok yeni geliştiriciler Yani bugünlerde jQuery düşünüyorum olduğunu JavaScript. Küçük bir eğitim onların doğru seçimleri yapmalarına yardımcı olacaktır.
— Mark Cooper
Bence bu cevap çok faydalıydı ve soru ile ilgili.
— mfnx
44

Söz konusu div'in stilini basitçe manipüle edebilirsiniz ...

document.getElementById('target').style.display = 'none';
— Aslan burcu
kaynak
Ama ikinci div'in içeriğini de göstermesini istiyorum
— Jake Ols
20

Js işlevini kullanarak Div'ı Gizleyebilir / Gösterebilirsiniz. aşağıdaki örnek

<script>
    function showDivAttid(){

        if(Your Condition) {

            document.getElementById("attid").style.display = 'inline';
        }
        else
        {
            document.getElementById("attid").style.display = 'none';
        }
    }

</script>

HTML - 

<div  id="attid" style="display:none;">Show/Hide this text</div>
— Rahul Sawant
kaynak
Id yerine sınıf adı kullanmak istiyorsanız, document.getElementsByClassName ('CLASSNAME') [0] .style.display = 'none' gibi kullanın;
— Vishwa
14

Tarzı kullanarak:

<style type="text/css">
   .hidden {
        display: none;
   {
   .visible {
        display: block;
   }
</style>

JavaScript'te bir olay işleyici kullanmak onclick=""HTML'deki özellikten daha iyidir :

<button id="RenderPortfolio_Btn">View Portfolio</button>
<button id="RenderResults_Btn">View Results</button>

<div class="visible" id="portfolio">
    <span>div1</span>
</div>

<div class"hidden" id="results">
    <span>div2</span>
</div>

JavaScript:

<script type="text/javascript">

    var portfolioDiv = document.getElementById('portfolio');
    var resultsDiv = document.getElementById('results');

    var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
    var resultsBtn = document.getElementById('RenderResults_Btn');

    portfolioBtn.onclick = function() {
        resultsDiv.setAttribute('class', 'hidden');
        portfolioDiv.setAttribute('class', 'visible');
    };

    resultsBtn.onclick = function() {
        portfolioDiv.setAttribute('class', 'hidden');
        resultsDiv.setAttribute('class', 'visible');
    };

</script>

jQuery , DOM öğelerini kolayca işlemenize yardımcı olabilir!

— Ifch0o1
kaynak
HTML5hidden
— bobobobo'nun
12

Bu sade JavaScript kodunu çok kullanışlı buldum!

#<script type="text/javascript">
    function toggle_visibility(id) 
    {
        var e = document.getElementById(id);
        if ( e.style.display == 'block' )
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
</script>
— Mumtaj
kaynak
5

HTML'nizi şu şekilde ayarlayın:

<div id="body" hidden="">
 <h1>Numbers</h1>
 </div>
 <div id="body1" hidden="hidden">
 Body 1
 </div>

Ve şimdi javascript'i

function changeDiv()
  {
  document.getElementById('body').hidden = "hidden"; // hide body div tag
  document.getElementById('body1').hidden = ""; // show body1 div tag
  document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; 
  // display text if JavaScript worked
   }
— Andriya
kaynak
1 
<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>
— Aguilar Junior
kaynak
Böyle bir sorun için Gizli kullanmak muhtemelen iyi bir fikir değildir - 11'den önce IE sürümlerinde desteklenmemesi yanı sıra poster, basit bir sekme arayüzüne eşdeğer bir şey yapmaya çalışıyor ve bu nedenle öğeler gizlenmeyecek tüm bağlamlar. Bu tür bir durumda, saklanmayı kontrol etmek için muhtemelen 'ekran'ı kullanmak daha iyidir - bkz. Stackoverflow.com/questions/6708247/…
— John - Not A Number
1

Sadece Basit Kimliğin stil niteliğini ayarlayın:

Gizli div'i göstermek için

<div id="xyz" style="display:none">
     ...............
</div>
//In JavaScript

document.getElementById('xyz').style.display ='block';  // to hide

Gösterilen div'i gizlemek için

<div id="xyz">
     ...............
</div>
//In JavaScript

document.getElementById('xyz').style.display ='none';  // to display
— susan097
kaynak
0

Purescript yanıtı, Halojen kullanan insanlar için:

import CSS (display, displayNone)
import Halogen.HTML as HH
import Halogen.HTML.CSS as CSS

render state = 
  HH.div [ CSS.style $ display displayNone ] [ HH.text "Hi there!" ]

"Elemanı inceler" gibi bir şey görürsünüz:

<div style="display: none">Hi there!</div>

ancak ekranda beklendiği gibi hiçbir şey görüntülenmez.

— Colin Woodbury
kaynak
0

Sadece Basit İşlev JavaScript kullanarak 'div' Göster / Gizle

<a id="morelink" class="link-more" style="font-weight: bold; display: block;" onclick="this.style.display='none'; document.getElementById('states').style.display='block'; return false;">READ MORE</a>


<div id="states" style="display: block; line-height: 1.6em;">
 text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here  
    <a class="link-less" style="font-weight: bold;" onclick="document.getElementById('morelink').style.display='inline-block'; document.getElementById('states').style.display='none'; return false;">LESS INFORMATION</a>
    </div>
— Ashar Zafar
kaynak
0

Bu soruyu buldum ve son zamanlarda Vue.js kullanarak bazı kullanıcı arayüzlerini uyguluyordum, bu yüzden bu iyi bir alternatif olabilir.

Önce targetProfili Görüntüle'yi tıkladığınızda kodunuz gizlenmiyor . Sen içeriği geçersiz kılma targetile div2.

let multiple = new Vue({
  el: "#multiple",
  data: {
    items: [{
        id: 0,
        name: 'View Profile',
        desc: 'Show profile',
        show: false,
      },
      {
        id: 1,
        name: 'View Results',
        desc: 'Show results',
        show: false,
      },
    ],
    selected: '',
    shown: false,
  },
  methods: {
    showItem: function(item) {
      if (this.selected && this.selected.id === item.id) {
        item.show = item.show && this.shown ? false : !item.show;
      } else {
        item.show = (this.selected.show || !item.show) && this.shown ? true : !this.shown;
      }
      this.shown = item.show;
      this.selected = item;
    },
  },
});
<div id="multiple">
  <button type="button" v-for="item in items" v-on:click="showItem(item)">{{item.name}}</button>

  <div class="" v-if="shown">: {{selected.desc}}</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
Snippet'i genişlet

— Teocci
kaynak
0

Bunu jQuery .toggle () kullanarak kolayca başarabilirsiniz .

$("#btnDisplay").click(function() {
  $("#div1").toggle();
  $("#div2").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  First Div
</div>
<div id="div2" style="display: none;">
  Second Div
</div>
<button id="btnDisplay">Display</button>
— Çad
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.