Tampilkan / sembunyikan 'div' menggunakan JavaScript

185

Untuk situs web yang saya lakukan, saya ingin memuat satu div, dan menyembunyikan yang lain, kemudian memiliki dua tombol yang akan beralih tampilan antara div menggunakan JavaScript.

Ini adalah kode saya saat ini

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>
Luaskan cuplikan

Fungsi kedua yang menggantikan div2 tidak berfungsi, tetapi yang pertama adalah.

javascript html onclick Jake Ols
sumber

Jawaban:

430

Cara menampilkan atau menyembunyikan elemen:

Untuk menampilkan atau menyembunyikan elemen, memanipulasi properti gaya elemen . Dalam kebanyakan kasus, Anda mungkin hanya ingin mengubah displayproperti elemen :

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

Atau, jika Anda masih ingin elemen untuk menempati ruang (seperti jika Anda menyembunyikan sel tabel), Anda bisa mengubah visibilityproperti elemen sebagai gantinya:

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

Menyembunyikan kumpulan elemen:

Jika Anda ingin menyembunyikan koleksi elemen, cukup ulangi setiap elemen dan ubah elemen displaymenjadi 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'));

Tampilkan cuplikan kode

Menampilkan koleksi elemen:

Sebagian besar waktu, Anda mungkin hanya akan beralih antara display: nonedan display: block, yang berarti bahwa berikut ini mungkin cukup ketika menampilkan kumpulan elemen.

Secara opsional Anda dapat menentukan yang diinginkan displaysebagai argumen kedua jika Anda tidak menginginkannya sebagai default 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

Tampilkan cuplikan kode

Atau, pendekatan yang lebih baik untuk menunjukkan elemen adalah dengan hanya menghapus displaystyling inline untuk mengembalikannya ke keadaan semula. Kemudian periksa displaygaya elemen yang dikomputasi untuk menentukan apakah elemen tersebut disembunyikan oleh aturan bertingkat. Jika demikian, maka tunjukkan elemen tersebut.

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

Tampilkan cuplikan kode

(Jika Anda ingin melangkah lebih jauh, Anda bahkan bisa meniru apa yang dilakukan jQuery dan menentukan gaya peramban default elemen dengan menambahkan elemen ke blank iframe(tanpa stylesheet yang bertentangan) dan kemudian mengambil styling yang dihitung. Dengan melakukan itu, Anda akan tahu inisial yang sebenarnyadisplay properti dari elemen tersebut dan Anda tidak perlu membuat hardcode nilai untuk mendapatkan hasil yang diinginkan.)

Beralih tampilan:

Demikian pula, jika Anda ingin beralih displayelemen atau kumpulan elemen, Anda bisa dengan mudah beralih ke setiap elemen dan menentukan apakah itu terlihat dengan memeriksa nilai yang dihitung dari displayproperti. Jika itu terlihat, atur displayke none, jika tidak menghapus displaystyling sebaris , dan jika itu masih disembunyikan, atur displayke nilai yang ditentukan atau default yang di-hardcode 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'));
});

Tampilkan cuplikan kode

Josh Crozier
sumber
97

Anda juga dapat menggunakan kerangka JavaScript jQuery :

Untuk Menyembunyikan Blok Div

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

Untuk menampilkan Blok Div

$(".divIDClass").show();
IMRUP
sumber
17
Pertanyaannya tidak menyebutkan menggunakan jQuery
MLeFevre
53
yang bukan alasan untuk downvoting. pertanyaannya tidak secara khusus mengatakan untuk tidak menggunakan jquery, dan selain orang lain yang datang ke sini untuk melihat jawabannya mungkin tidak memiliki kendala yang sama dengan OP.
Kinjal Dixit
5
@KinjalDixit Jika IMRUP ingin menambahkan catatan bahwa jawabannya tidak menggunakan vanilla JS dan sebaliknya bergantung pada jQuery, maka itu akan memiliki beberapa kelebihan, meskipun pertanyaan aslinya tidak ditandai untuk jQuery / bahkan menyebutkan jQuery. Seperti saat ini berdiri itu adalah jawaban menggunakan perpustakaan tanpa menyebutkan bahwa itu melakukannya, sedikit (walaupun mungkin semua yang diperlukan) penjelasan, dan membingungkan penggunaan pemilih (menggunakan pemilih kelas sementara menyatakan ID ?). Saat ini berdiri, saya tidak berpikir itu adalah jawaban yang berguna untuk pertanyaan ini.
MLeFevre
3
Saat menambahkan contoh jQuery (yang merupakan IMHO pendekatan yang benar-benar valid), berikan juga contoh vanilla JS untuk perbandingan dan jelaskan kepada OP perbedaannya. Banyak sekali pengembang baru yang berpikir bahwa jQuery adalah JavaScript. Sedikit eduksi akan membantu mereka membuat pilihan yang tepat.
Mark Cooper
Saya pikir jawaban ini sangat berguna, dan terkait dengan pertanyaan itu.
mfnx
44

Anda cukup memanipulasi gaya div yang dimaksud ...

document.getElementById('target').style.display = 'none';
Leo
sumber
Tapi saya juga ingin menampilkan konten div kedua
Jake Ols
20

Anda dapat Sembunyikan / Tampilkan Div menggunakan fungsi Js. contoh di bawah ini

<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
sumber
jika Anda ingin menggunakan nama kelas alih-alih Id, gunakan like document.getElementsByClassName ('CLASSNAME') [0] .style.display = 'none';
Vishwa
14

Menggunakan gaya:

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

Menggunakan event handler dalam JavaScript lebih baik daripada onclick=""atribut dalam HTML:

<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 dapat membantu Anda memanipulasi elemen DOM dengan mudah!

Ifch0o1
sumber
Anda dapat mencoba hiddenatribut HTML5
bobobobo
12

Saya menemukan kode JavaScript sederhana ini sangat berguna!

#<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
sumber
5

Tetapkan HTML Anda sebagai

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

Dan sekarang atur javascript sebagai

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
sumber
1 
<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>
Aguilar Junior
sumber
Menggunakan Tersembunyi untuk masalah seperti ini mungkin bukan ide yang bagus - dan juga tidak didukung dalam versi IE sebelum 11, poster secara efektif mencoba melakukan sesuatu yang setara dengan antarmuka tab sederhana, dan agar elemen tidak akan disembunyikan di semua konteks. Dalam situasi seperti ini, mungkin lebih baik menggunakan 'tampilan' untuk mengontrol persembunyian - lihat stackoverflow.com/questions/6708247/...
John - Not A Number
1

Cukup Sederhana Setel atribut gaya ID:

Untuk Menampilkan div yang tersembunyi

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

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

Untuk menyembunyikan div yang ditampilkan

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

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

Dan jawaban Purescript, untuk orang yang menggunakan Halogen:

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!" ]

Jika Anda "memeriksa elemen", Anda akan melihat sesuatu seperti:

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

tetapi tidak ada yang benar-benar akan ditampilkan di layar Anda, seperti yang diharapkan.

Colin Woodbury
sumber
0

Hanya Fungsi Sederhana Perlu Untuk mengimplementasikan Tampilkan / sembunyikan 'div' menggunakan JavaScript

<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
sumber
0

Saya menemukan pertanyaan ini dan baru-baru ini saya mengimplementasikan beberapa UI menggunakan Vue.js sehingga ini bisa menjadi alternatif yang baik.

Pertama kode Anda tidak disembunyikan targetketika Anda mengklik Lihat Profil. Anda mengganti konten targetdengan 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>
Luaskan cuplikan

Teocci
sumber
0

Anda dapat dengan mudah mencapai ini dengan menggunakan jQuery .toggle () .

$("#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>
Chad
sumber