แสดง / ซ่อน 'div' โดยใช้ JavaScript

185

สำหรับเว็บไซต์ที่ฉันทำฉันต้องการโหลดหนึ่ง div และซ่อนอีกอันจากนั้นมีสองปุ่มที่จะสลับมุมมองระหว่าง div โดยใช้ JavaScript

นี่คือรหัสปัจจุบันของฉัน

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>
ขยายตัวอย่างข้อมูล

ฟังก์ชั่นที่สองที่แทนที่ div2 ไม่ทำงาน แต่ฟังก์ชั่นแรกคือ

javascript  html  onclick 
— Jake Ols
แหล่งที่มา

คำตอบ:

429

วิธีแสดงหรือซ่อนองค์ประกอบ:

เพื่อที่จะแสดงหรือซ่อนองค์ประกอบจัดการกับองค์ประกอบของโรงแรมสไตล์ ในกรณีส่วนใหญ่คุณอาจต้องการเปลี่ยนdisplayคุณสมบัติขององค์ประกอบ:

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

อีกทางหนึ่งถ้าคุณยังต้องการให้องค์ประกอบครอบครองพื้นที่ (เช่นถ้าคุณต้องการซ่อนเซลล์ตาราง) คุณสามารถเปลี่ยนvisibilityคุณสมบัติขององค์ประกอบแทน:

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

การซ่อนชุดขององค์ประกอบ:

หากคุณต้องการที่จะซ่อนตัวคอลเลกชันขององค์ประกอบเพียงย้ำผ่านแต่ละองค์ประกอบและการเปลี่ยนแปลงองค์ประกอบของdisplayการ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'));

แสดงตัวอย่างโค้ด

แสดงชุดขององค์ประกอบ:

ส่วนใหญ่คุณอาจจะสลับไปมาระหว่างdisplay: noneและdisplay: blockซึ่งหมายความว่าสิ่งต่อไปนี้อาจเพียงพอเมื่อแสดงชุดขององค์ประกอบ

คุณสามารถเลือกระบุที่ต้องการเป็นอาร์กิวเมนต์ที่สองถ้าคุณไม่ต้องการที่จะเริ่มต้นกับdisplayblock

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

แสดงตัวอย่างโค้ด

อีกวิธีหนึ่งที่ดีกว่าสำหรับการแสดงองค์ประกอบคือการลบการdisplayจัดแต่งทรงผมแบบอินไลน์เพื่อเปลี่ยนกลับเป็นสถานะเริ่มต้น จากนั้นตรวจสอบdisplayสไตล์ที่คำนวณขององค์ประกอบเพื่อตรวจสอบว่ามันถูกซ่อนอยู่โดยกฎระดับล่าง ถ้าเป็นเช่นนั้นแสดงองค์ประกอบ

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

แสดงตัวอย่างโค้ด

(ถ้าคุณต้องการที่จะก้าวไปอีกขั้นคุณสามารถเลียนแบบสิ่งที่ jQuery ทำและกำหนดสไตล์ของเบราว์เซอร์เริ่มต้นขององค์ประกอบโดยการผนวกองค์ประกอบให้เป็นช่องว่างiframe(โดยไม่มีสไตล์ชีทที่ขัดแย้งกัน) จากนั้นดึงสไตล์ที่คำนวณ จะทราบdisplayมูลค่าทรัพย์สินเริ่มต้นที่แท้จริงขององค์ประกอบและคุณไม่ต้อง hardcode ค่าเพื่อให้ได้ผลลัพธ์ที่ต้องการ)

การสลับการแสดงผล:

หากคุณต้องการสลับdisplayองค์ประกอบหรือชุดขององค์ประกอบคุณสามารถทำซ้ำองค์ประกอบแต่ละอย่างและพิจารณาว่าสามารถมองเห็นได้หรือไม่โดยตรวจสอบค่าที่คำนวณได้ของdisplayคุณสมบัติ ถ้ามันสามารถมองเห็นได้กำหนดdisplayที่จะnoneมิฉะนั้นเอาแบบอินไลน์displayจัดแต่งทรงผมและถ้ามันยังคงซ่อนตั้งค่าที่ระบุหรือเริ่มต้นฮาร์ดโค้ด,displayblock

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

แสดงตัวอย่างโค้ด

— Josh Crozier
แหล่งที่มา
97

คุณยังสามารถใช้เฟรมเวิร์กjQuery JavaScript:

ในการซ่อน Div Div

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

ในการแสดง Div Block

$(".divIDClass").show();
— IMRUP
แหล่งที่มา
17
คำถามไม่ได้กล่าวถึงการใช้ jQuery
— MLeFevre
53
ซึ่งไม่ใช่เหตุผลสำหรับการ downvoting คำถามไม่ได้บอกว่าจะไม่ใช้ jQuery โดยเฉพาะและนอกจากคนอื่น ๆ ที่มาที่นี่เพื่อดูคำตอบอาจไม่มีข้อ จำกัด เช่นเดียวกันกับ OP
— Kinjal Dixit
5
@KinjalDixit หาก IMRUP ต้องการเพิ่มบันทึกย่อที่คำตอบของเขาไม่ได้ใช้วานิลลา JS และอาศัย jQuery แทนแล้วจะมีข้อดีอยู่บ้างแม้ว่าคำถามเดิมจะไม่ถูกแท็กสำหรับ jQuery หรือแม้กระทั่งกล่าวถึง jQuery ในขณะที่มันกำลังยืนอยู่มันเป็นคำตอบในการใช้ห้องสมุดโดยไม่เอ่ยว่ามันไม่ได้เล็ก ๆ น้อย ๆ (แม้ว่าอาจจะทั้งหมดที่จำเป็น) คำอธิบายและทำให้เกิดความสับสนการใช้งานของผู้เลือก (โดยใช้ตัวเลือกระดับในขณะที่ระบุID ?) อย่างที่ทราบในปัจจุบันฉันไม่คิดว่ามันจะเป็นคำตอบที่เป็นประโยชน์
— MLeFevre
3
เมื่อเพิ่มตัวอย่าง jQuery (ซึ่งเป็นวิธีการที่สมบูรณ์แบบ IMHO) โปรดให้ตัวอย่างวานิลลา JS สำหรับการเปรียบเทียบและอธิบายถึงความแตกต่างของ OP นักพัฒนาใหม่หลายคนในทุกวันนี้คิดว่า jQuery คือ JavaScript การศึกษาเพียงเล็กน้อยจะช่วยให้พวกเขาตัดสินใจได้ถูกต้อง
— มาร์คคูเปอร์
ฉันคิดว่าคำตอบนี้มีประโยชน์มากและเกี่ยวข้องกับคำถาม
— mfnx
44

คุณสามารถจัดการสไตล์ของ div ในคำถามได้ ...

document.getElementById('target').style.display = 'none';
— สิงห์
แหล่งที่มา
แต่ฉันต้องการให้แสดงเนื้อหาของ div ที่สองเช่นกัน
— Jake Ols
20

คุณสามารถซ่อน / แสดง Div โดยใช้ฟังก์ชัน Js ตัวอย่างด้านล่าง

<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>
— ราหุล Sawant
แหล่งที่มา
ถ้าคุณต้องการใช้ชื่อคลาสแทน Id ให้ใช้เช่นdocument.getElementsByClassName ('CLASSNAME') [0] .style.display = 'none';
— Vishwa
14

ใช้สไตล์:

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

การใช้ตัวจัดการเหตุการณ์ใน JavaScript นั้นดีกว่าonclick=""แอตทริบิวต์ใน 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อาจช่วยให้คุณจัดการองค์ประกอบ DOM ได้ง่าย!

— Ifch0o1
แหล่งที่มา
คุณสามารถลองใช้hiddenคุณลักษณะของ HTML5
— bobobobo
12

ฉันพบรหัส JavaScript ธรรมดานี้มีประโยชน์มาก!

#<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
แหล่งที่มา
5

ตั้งค่า HTML ของคุณเป็น

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

และตอนนี้ตั้งค่าจาวาสคริปต์เป็น

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
แหล่งที่มา
1 
<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>
— Aguilar Junior
แหล่งที่มา
การใช้ Hidden สำหรับปัญหาเช่นนี้อาจไม่ใช่ความคิดที่ดีรวมถึงการไม่รองรับใน IE เวอร์ชัน 11 ก่อนหน้านั้นโปสเตอร์พยายามทำบางสิ่งบางอย่างที่เทียบเท่ากับส่วนต่อประสานแท็บอย่างง่ายและองค์ประกอบจะไม่ถูกซ่อนอยู่ บริบททั้งหมด ในสถานการณ์แบบนี้คุณควรใช้ 'display' เพื่อควบคุมการซ่อน - ดูstackoverflow.com/questions/6708247//
— จอห์น - ไม่ใช่ A Number
1

ง่าย ๆ เพียงตั้งค่าคุณลักษณะของ ID:

เพื่อแสดง div ที่ซ่อนอยู่

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

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

เพื่อซ่อน div ที่แสดง

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

document.getElementById('xyz').style.display ='none';  // to display
— susan097
แหล่งที่มา
0

และคำตอบ Purescript สำหรับผู้ที่ใช้ฮาโลเจน:

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

หากคุณ "ตรวจสอบองค์ประกอบ" คุณจะเห็นสิ่งต่อไปนี้:

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

แต่ไม่มีอะไรจะแสดงบนหน้าจอของคุณตามที่คาดไว้

— Colin Woodbury
แหล่งที่มา
0

ฟังก์ชั่นที่เรียบง่ายเพียงแค่ต้องการแสดง / ซ่อน 'div' โดยใช้ 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
แหล่งที่มา
0

ฉันพบคำถามนี้และเมื่อเร็ว ๆ นี้ฉันได้ติดตั้ง UIs บางอย่างโดยใช้ Vue.js ดังนั้นนี่จึงเป็นทางเลือกที่ดี

ก่อนอื่นรหัสของคุณจะไม่ซ่อนtargetเมื่อคุณคลิกที่ดูโปรไฟล์ คุณกำลังเอาชนะเนื้อหาด้วยtargetdiv2

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>
ขยายตัวอย่างข้อมูล

— Teocci
แหล่งที่มา
0

คุณสามารถบรรลุเป้าหมายนี้ด้วยการใช้ 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>
— ชาด
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.