जावास्क्रिप्ट का उपयोग करके 'div' दिखाएँ / छिपाएँ

185

एक वेबसाइट जो मैं कर रहा हूं, उसके लिए मैं एक डिव लोड करना चाहता हूं, और दूसरे को छिपाना चाहता हूं, फिर दो बटन हैं जो जावास्क्रिप्ट का उपयोग करते हुए डिव के बीच विचारों को टॉगल करेंगे।

यह मेरा वर्तमान कोड है

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 
— जेक ओल
स्रोत

जवाबों:

426

किसी तत्व को कैसे दिखाना या छिपाना है:

किसी तत्व को दिखाने या छिपाने के लिए, तत्व की शैली की संपत्ति में हेरफेर करें । ज्यादातर मामलों में, आप शायद केवल तत्व की 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, जिसका अर्थ है कि तत्वों का संग्रह दिखाते समय निम्नलिखित पर्याप्त हो सकता है।

displayयदि आप इसे डिफ़ॉल्ट रूप से नहीं चाहते हैं, तो आप वैकल्पिक रूप से दूसरे तर्क के रूप में वांछित निर्दिष्ट कर सकते हैं 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

कोड स्निपेट दिखाएं

वैकल्पिक रूप से, तत्व को दिखाने के लिए एक बेहतर तरीका केवल इनलाइन 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तत्व के वास्तविक प्रारंभिक गुण मान को जान लेंगे और वांछित परिणाम प्राप्त करने के लिए आपको किसी मूल्य को हार्डकोड नहीं करना पड़ेगा।)

प्रदर्शन टॉगल करना:

इसी तरह, यदि आप displayकिसी तत्व या तत्वों के संग्रह को टॉगल करना चाहते हैं, तो आप बस प्रत्येक तत्व पर पुनरावृति कर सकते हैं और यह निर्धारित कर सकते हैं कि क्या यह displayसंपत्ति के गणना मूल्य की जांच करके दिखाई दे रहा है । यदि वह दिखाई है, सेट displayकरने के लिए noneअन्यथा इनलाइन निकालने के लिए, displayस्टाइल, और अगर यह अभी भी छिपा हुआ है, सेट display, निर्धारित मूल्य या हार्डकोडेड डिफ़ॉल्ट करने के लिए 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'));
});

कोड स्निपेट दिखाएं

— जोश क्रोज़ियर
स्रोत
96

आप jQuery जावास्क्रिप्ट फ्रेमवर्क का उपयोग भी कर सकते हैं :

डिव ब्लॉक को छिपाने के लिए

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

डिव ब्लॉक दिखाने के लिए

$(".divIDClass").show();
— IMRUP
स्रोत
17
प्रश्न में jQuery
— MLeFevre
52
जो डाउनवॉट करने का कारण नहीं है। सवाल विशेष रूप से jquery का उपयोग नहीं करने के लिए नहीं कहता है, और इसके अलावा अन्य लोगों के जवाब देखने के लिए यहां आने के लिए ओपी के समान बाधाएं नहीं हो सकती हैं।
— किंजल दीक्षित
5
@KinjalDixit अगर IMRUP एक ​​नोट जोड़ना चाहता है कि उसका जवाब वैनिला JS का उपयोग नहीं करता है और इसके बजाय jQuery पर निर्भर करता है, तो इसमें कुछ योग्यता होगी, भले ही मूल प्रश्न jQuery के लिए टैग न किया गया हो / यहां तक ​​कि ____ का उल्लेख नहीं करता है। जैसा कि वर्तमान में यह खड़ा है कि यह एक पुस्तकालय का उपयोग किए बिना यह जवाब है कि यह ऐसा करता है, थोड़ा (शायद यह सब आवश्यक है) स्पष्टीकरण है, और एक चयनकर्ता का भ्रमित करने वाला उपयोग (वर्ग चयनकर्ता आईडी का उपयोग करते हुए ?)। जैसा कि यह वर्तमान में है, मुझे नहीं लगता कि यह इस प्रश्न का उपयोगी उत्तर है।
— MLeFevre
3
जब एक jQuery उदाहरण (जो पूरी तरह से वैध दृष्टिकोण IMHO है) जोड़ते समय कृपया तुलना के लिए एक वैनिला जेएस उदाहरण भी प्रदान करें और ओपी को अंतर समझाएं। कई नए डेवलपर्स तो इन दिनों लगता है jQuery है जावास्क्रिप्ट। थोड़ा-सा संपादन उन्हें सही विकल्प बनाने में मदद करेगा।
— मार्क कूपर
मुझे लगता है कि यह उत्तर बहुत उपयोगी था, और प्रश्न से संबंधित था।
— 19
44

आप बस प्रश्न में div की शैली में हेरफेर कर सकते हैं ...

document.getElementById('target').style.display = 'none';
— सिंह
स्रोत
लेकिन मैं चाहूंगा कि वह दूसरे डिव की सामग्री को भी प्रदर्शित करे
— जेक ओल्स
20

आप 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>
— राहुल सावंत
स्रोत
यदि आप Id के बजाय वर्ग नाम का उपयोग करना चाहते हैं, तो document.getElementsByClassName ('CLASSNAME') [0] .style.display = 'none';
— विश्वा
14

शैली का उपयोग करना:

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

जावास्क्रिप्ट में ईवेंट हैंडलर का उपयोग करना 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>

जावास्क्रिप्ट:

<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
स्रोत
आप एचटीएमएल 5 की hiddenविशेषता
— बॉबोबोबो
12

मुझे यह सादा जावास्क्रिप्ट कोड बहुत आसान लगा!

#<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>
— एगुइलर जूनियर
स्रोत
इस तरह की समस्या के लिए हिडन का उपयोग करना शायद एक अच्छा विचार नहीं है - साथ ही 11 से पहले IE संस्करणों में असमर्थित होने के बाद, पोस्टर प्रभावी रूप से एक साधारण टैब इंटरफ़ेस के बराबर कुछ करने की कोशिश कर रहा है, और इसलिए तत्व छिपाए नहीं जाएंगे। सभी संदर्भों। इस तरह की स्थिति में, छिपने को नियंत्रित करने के लिए 'डिस्प्ले' का उपयोग करना बेहतर है - देखें stackoverflow.com/questions/6708247/…
— जॉन -
1

बस सरल शैली आईडी की विशेषता सेट करें:

छिपे हुए div दिखाने के लिए

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

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

दिखाए गए तलाक को छिपाने के लिए

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

लेकिन वास्तव में आपकी स्क्रीन पर कुछ भी प्रदर्शित नहीं होगा, जैसा कि अपेक्षित था।

— कॉलिन वुडबरी
स्रोत
0

जावास्क्रिप्ट का उपयोग करके 'div' शो को छिपाने / छिपाने के लिए बस सरल कार्य की आवश्यकता है

<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>
— अशर जफर
स्रोत
0

मुझे यह सवाल मिला और हाल ही में मैं Vue.js का उपयोग करके कुछ UI लागू कर रहा हूं ताकि यह एक अच्छा विकल्प हो सके।

targetजब आप व्यू प्रोफ़ाइल पर क्लिक करते हैं तो आपका पहला कोड छुपा नहीं होता है। आप सामग्री अधिभावी कर रहे हैं targetके साथ 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>
स्निपेट का विस्तार करें

— 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>
— काग़ज़ का टुकड़ा
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.