Pokaż / ukryj „div” za pomocą JavaScript

185

W przypadku strony internetowej, którą robię, chcę załadować jeden div, a ukryć inny, a następnie mieć dwa przyciski, które będą przełączać widoki między div przy użyciu JavaScript.

To jest mój obecny kod

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>

Druga funkcja zastępująca div2 nie działa, ale pierwsza to.

Jake Ols
źródło

Odpowiedzi:

428

Jak pokazać lub ukryć element:

Aby wyświetlić lub ukryć element, manipuluj jego właściwością stylu . W większości przypadków, to prawdopodobnie po prostu chcesz zmienić elementu displaywłasności :

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

Ewentualnie, jeśli nadal chcesz elementu do zajmowania miejsca (jak gdybyś ukryć komórkę tabeli), można zmienić tego elementu visibilitywłasność zamiast:

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

Ukrywanie kolekcji elementów:

Jeśli chcesz ukryć kolekcję elementów, po prostu iteruj każdy element i zmień jego elementy displayna 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'));

Pokazuje kolekcję elementów:

Przez większość czasu będziesz prawdopodobnie po prostu przełączać się między display: nonei display: block, co oznacza, że ​​następujące elementy mogą wystarczyć podczas wyświetlania kolekcji elementów.

Możesz opcjonalnie podać żądany displayargument jako drugi argument, jeśli nie chcesz, aby był ustawiony domyślnie 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

Alternatywnie, lepszym podejściem do pokazania elementu (elementów) byłoby po prostu usunięcie displaystylizacji wbudowanej w celu przywrócenia jej z powrotem do stanu początkowego. Następnie sprawdź obliczony displaystyl elementu, aby ustalić, czy jest on ukrywany przez regułę kaskadową. Jeśli tak, to pokaż element.

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

(Jeśli chcesz pójść o krok dalej, możesz nawet naśladować to, co robi jQuery i określić domyślny styl przeglądarki elementu, dodając element do pustego iframe(bez sprzecznego arkusza stylów), a następnie odzyskując obliczone style. W ten sposób możesz pozna prawdziwą displaywartość początkową właściwości elementu i nie będzie konieczne kodowanie wartości w celu uzyskania pożądanych wyników).

Przełączanie wyświetlacza:

Podobnie, jeśli chcesz przełączać displayelement lub kolekcję elementów, możesz po prostu iterować każdy element i ustalić, czy jest on widoczny, sprawdzając obliczoną wartość displaywłaściwości. Jeśli jest to widoczne, należy ustawić displaysię none, w przeciwnym razie usuń inline displaystylizacji, a jeśli to jeszcze ukryte, ustawić displaypodanej wartości lub zakodowanego na stałe domyślnie 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'));
});

Josh Crozier
źródło
97

Możesz także użyć struktury JavaScript jQuery :

Aby ukryć blok Div

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

Aby wyświetlić Div Block

$(".divIDClass").show();
IMRUP
źródło
17
Pytanie nie wspomina o użyciu jQuery
MLeFevre
53
co nie jest powodem do przegłosowania. pytanie nie mówi wyraźnie, aby nie używać jquery, a poza tym inni ludzie, którzy przychodzą tutaj, aby zobaczyć odpowiedzi, mogą nie mieć takich samych ograniczeń jak OP.
Kinjal Dixit
5
@KinjalDixit Jeśli IMRUP chce dodać notatkę, że jego odpowiedź nie używa waniliowego JS, a zamiast tego opiera się na jQuery, to miałaby pewną wartość, nawet jeśli oryginalne pytanie nie jest otagowane dla jQuery / nawet wspomina o jQuery. W obecnym stanie jest to odpowiedź wykorzystująca bibliotekę, nie wspominając o tym, że robi to, mało (choć prawdopodobnie wszystko, co jest konieczne) wyjaśnień i mylące użycie selektora (używanie selektora klasy podczas podawania ID ?). W obecnym stanie nie sądzę, aby była przydatna odpowiedź na to pytanie.
MLeFevre
3
Dodając przykład jQuery (który jest całkowicie poprawnym podejściem IMHO), podaj również waniliowy przykład JS do porównania i wyjaśnij OP różnicę. Tak wielu nowych programistów uważa, że ​​jQuery to JavaScript. Mała redukcja pomoże im dokonać właściwych wyborów.
Mark Cooper
Myślę, że ta odpowiedź była bardzo przydatna i związana z pytaniem.
mfnx,
44

Możesz po prostu manipulować stylem tego diva ...

document.getElementById('target').style.display = 'none';
Lew
źródło
Ale chciałbym, aby wyświetlała także zawartość drugiego diva
Jake Ols,
20

Możesz ukryć / pokazać Div używając funkcji Js. próbka poniżej

<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
źródło
jeśli chcesz użyć nazwy klasy zamiast identyfikatora, użyj jak document.getElementsByClassName („NAZWA KLASY”) [0] .style.display = 'none';
Vishwa
14

Korzystanie ze stylu:

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

Korzystanie z procedury obsługi zdarzeń w JavaScript jest lepsze niż onclick=""atrybut w 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 może pomóc w łatwym manipulowaniu elementami DOM!

Ifch0o1
źródło
Możesz spróbować hiddenatrybutu HTML5
bobobobo
12

Uważam, że ten prosty kod JavaScript jest bardzo przydatny!

#<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
źródło
5

Ustaw swój HTML jako

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

A teraz ustaw javascript na

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
   }
Andrija
źródło
1
<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>
Aguilar Junior
źródło
Używanie ukrytego dla takiego problemu prawdopodobnie nie jest dobrym pomysłem - oprócz tego, że nie jest obsługiwany w wersjach IE przed 11, plakat skutecznie próbuje zrobić coś równoważnego z prostym interfejsem karty, więc elementy nie będą ukryte w wszystkie konteksty. W takiej sytuacji prawdopodobnie lepiej użyć „display” do kontrolowania ukrywania - patrz stackoverflow.com/questions/6708247/…
John - Not A Number
1

Po prostu Ustaw atrybut stylu identyfikatora:

Aby pokazać ukryty div

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

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

Aby ukryć pokazany div

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

document.getElementById('xyz').style.display ='none';  // to display
susan097
źródło
0

I odpowiedź Purescript, dla osób używających 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!" ]

Jeśli „skontrolujesz element”, zobaczysz coś takiego:

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

ale zgodnie z oczekiwaniami nic nie będzie wyświetlane na ekranie.

Colin Woodbury
źródło
0

Wystarczy prosta funkcja Należy zaimplementować Pokaż / ukryj „div” za pomocą 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
źródło
0

Znalazłem to pytanie, a ostatnio wdrażałem niektóre interfejsy użytkownika za pomocą Vue.js, więc może to być dobra alternatywa.

Po pierwsze, twój kod nie ukrywa się targetpo kliknięciu Wyświetl profil. Przesłaniasz treść za targetpomocą 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
źródło
0

Możesz to łatwo osiągnąć za pomocą 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>
Czad
źródło