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>

Rozwiń fragment kodu

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

javascript html onclick

— Jake Ols
źródło

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

Pokaż fragment kodu

hide(document.querySelectorAll('.target'));

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

<div class="target">This div will be hidden.</div>

<span class="target">This span will be hidden as well.</span>

Rozwiń fragment kodu

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

Pokaż fragment kodu

var elements = document.querySelectorAll('.target');

show(elements, 'inline-block'); // The second param allows you to specify a display value

show(document.getElementById('hidden-input'));

function show (elements, specifiedDisplay) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = specifiedDisplay || 'block';
  }
}

<div class="target" style="display: none">This hidden div should have a display of 'inline-block' when it is shown.</div>

<span>Inline span..</span>

<input id="hidden-input" />

Rozwiń fragment kodu

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

Pokaż fragment kodu

show(document.querySelectorAll('.target'));

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

<span class="target" style="display: none">Should revert back to being inline.</span>

<span class="target" style="display: none">Inline as well.</span>

<div class="target" style="display: none">Should revert back to being block level.</div>

<span class="target" style="display: none">Should revert back to being inline.</span>

Rozwiń fragment kodu

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

Pokaż fragment kodu

document.getElementById('toggle-button').addEventListener('click', function () {
    toggle(document.querySelectorAll('.target'));
});

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

.target { display: none; }

<button id="toggle-button">Toggle display</button>

<span class="target">Toggle the span.</span>

<div class="target">Toggle the div.</div>

Rozwiń fragment kodu

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

Rozwiń fragment kodu

— 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