জাভাস্ক্রিপ্ট ব্যবহার করে 'ডিভি' দেখান / লুকান

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 
— জ্যাক ওলস
সূত্র

উত্তর:

424

কীভাবে কোনও উপাদান দেখানো বা লুকানো যায়:

কোনও উপাদান দেখানোর বা আড়াল করার জন্য, উপাদানটির শৈলীর বৈশিষ্ট্যগুলি ম্যানিপুলেট করুন । বেশিরভাগ ক্ষেত্রে, আপনি সম্ভবত কেবলমাত্র উপাদানটির 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(বিরোধী স্টাইলশিট ছাড়াই) যুক্ত করে উপাদানটির ডিফল্ট ব্রাউজার স্টাইলিং নির্ধারণ করতে পারেন এবং তারপরে গণিত স্টাইলিংটি পুনরুদ্ধার করতে পারেন you এটি করার ক্ষেত্রে, আপনি 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
@ কিনজালডিক্সিত যদি আইএমআরপি কোনও নোট যুক্ত করতে চায় যে তার উত্তরটি ভ্যানিলা জেএস ব্যবহার করে না এবং পরিবর্তে jQuery এর উপর নির্ভর করে, তবে এর কিছুটা যোগ্যতা থাকতে পারে, যদিও মূল প্রশ্নটি jQuery এর জন্য ট্যাগ করা হয়নি / এমনকি jQuery উল্লেখ করেছে। যেহেতু এটি বর্তমানে দাঁড়িয়েছে এটি একটি লাইব্রেরি ব্যবহার করে এটির উল্লেখ না করেই এটির উত্তর, সামান্য (সম্ভবত এটি প্রয়োজনীয় সমস্ত কিছু) ব্যাখ্যা এবং কোনও নির্বাচককে বিভ্রান্তকর ব্যবহার ( আইডি বর্ণিত অবস্থায় ক্লাস সিলেক্টর ব্যবহার করে ?)। যেমনটি বর্তমানে দাঁড়িয়ে আছে, আমি মনে করি না যে এটি এই প্রশ্নের কার্যকর উত্তর।
— এমএলফেভেরে
3
যখন কোনও জিকুয়ের উদাহরণ যুক্ত করবেন (যা পুরোপুরি বৈধ পদ্ধতির আইএমএইচও হয়) দয়া করে তুলনা করার জন্য একটি ভ্যানিলা জেএস উদাহরণ সরবরাহ করুন এবং ওপিকে পার্থক্যটি ব্যাখ্যা করুন। অনেক নতুন ডেভেলপারদের তাই এই দিন মনে jQuery এর হয় জাভাস্ক্রিপ্ট। সামান্য শিক্ষা তাদের সঠিক পছন্দগুলি করতে সহায়তা করবে।
— মার্ক
আমি মনে করি এই উত্তরটি খুব দরকারী ছিল এবং প্রশ্নের সাথে সম্পর্কিত।
— এমএফএনএক্স
44

আপনি কেবল প্রশ্নে ডিভের স্টাইলটি পরিচালনা করতে পারেন ...

document.getElementById('target').style.display = 'none';
— সিংহরাশি
সূত্র
তবে আমি এটি দ্বিতীয়
— ডিভের
20

আপনি জেএস ফাংশনটি ব্যবহার করে ডিভ লুকান / প্রদর্শন করতে পারেন। নীচে নমুনা

<script>
    function showDivAttid(){

        if(Your Condition) {

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

</script>

এইচটিএমএল - 

<div  id="attid" style="display:none;">Show/Hide this text</div>
— রাহুল সাওয়ান্ত
সূত্র
আপনি যদি আইডির পরিবর্তে শ্রেণীর নাম ব্যবহার করতে চান তবে ডকুমেন্টের
— বিশ্ব
14

শৈলী ব্যবহার:

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

জাভাস্ক্রিপ্টে ইভেন্ট হ্যান্ডলারটি ব্যবহার করা onclick=""এইচটিএমএলের বৈশিষ্ট্যের চেয়ে ভাল :

<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
সূত্র
আপনি এইচটিএমএল 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

আপনার এইচটিএমএল হিসাবে সেট করুন

<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 সংস্করণের আগে আইই সংস্করণগুলিতে অসমর্থিত হওয়ার পাশাপাশি পোস্টার কার্যকরভাবে একটি সাধারণ ট্যাব ইন্টারফেসের সমতুল্য কিছু করার চেষ্টা করছে, এবং তাই উপাদানগুলিতে লুকানো থাকবে না সমস্ত প্রসঙ্গ। এই ধরণের পরিস্থিতিতে, লুকোচুরি নিয়ন্ত্রণ করতে 'ডিসপ্লে' ব্যবহার করা ভাল - স্ট্যাকওভারফ্লো
— জন - Number:
1

কেবল সাধারণ আইডির শৈলীর বৈশিষ্ট্যটি সেট করুন:

লুকানো ডিভ দেখানোর জন্য

<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

এবং পুরাণলিপি উত্তর, হ্যালোজেন ব্যবহারকারীদের জন্য:

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

কেবল সাধারণ ফাংশনটি জাভাস্ক্রিপ্ট ব্যবহার করে 'ডিভ' প্রদর্শন / আড়াল করতে বাস্তবায়ন করতে হবে

<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 ব্যবহার করে কিছু ইউআই বাস্তবায়ন করেছি যাতে এটি একটি ভাল বিকল্প হতে পারে।

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। টগল () ব্যবহার করে সহজেই এটি অর্জন করতে পারেন ।

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