Εμφάνιση/απόκρυψη 'div' με χρήση JavaScript

Για έναν ιστότοπο που κάνω, θέλω να φορτώσω ένα div και να κρύψω ένα άλλο, και στη συνέχεια να έχω δύο κουμπιά που θα εναλλάσσουν τις προβολές μεταξύ των div χρησιμοποιώντας JavaScript.

Αυτός είναι ο τρέχων κώδικάς μου

Teocci
Επεξεργασμένη ερώτηση Κάνε Ιανουάριος 2019 в 7:46
Προγραμματισμός
javascript html onclick
Κάνε Ιανουάριος 2014 в 1:12
19 προβολές
Λύση

Πώς να εμφανίσετε ή να αποκρύψετε ένα στοιχείο:

Για να εμφανίσετε ή να αποκρύψετε ένα στοιχείο, χειριστείτε την ιδιότητα [στυλ][1] του στοιχείου. Στις περισσότερες περιπτώσεις, πιθανότατα θέλετε απλώς να αλλάξετε την ιδιότητα [display][2] του στοιχείου:

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

Εναλλακτικά, αν θέλετε ακόμα το στοιχείο να καταλαμβάνει χώρο (όπως αν θέλετε να αποκρύψετε ένα κελί πίνακα), μπορείτε να αλλάξετε την ιδιότητα [ορατότητα][3] του στοιχείου:

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

Απόκρυψη μιας συλλογής στοιχείων:

Αν θέλετε να αποκρύψετε μια συλλογή στοιχείων, απλά επαναλάβετε κάθε στοιχείο και αλλάξτε την "εμφάνιση" του στοιχείου σε "καμία":

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}
Josh Crozier
Επεξεργασμένη απάντηση Κάνε Νοέμβριος 2015 в 6:49
Σχόλια (0)

Μπορείτε απλά να χειριστείτε το στυλ του εν λόγω div...

document.getElementById('target').style.display = 'none';
Σχόλια (1)

Χρήση στυλ:


   .hidden {
        display: none;
   {
   .visible {
        display: block;
   }

Η χρήση ενός χειριστή συμβάντος στην JavaScript είναι καλύτερη από το χαρακτηριστικό onclick="" στην HTML:

View Portfolio
View Results

<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 εύκολα!

Peter Mortensen
Επεξεργασμένη απάντηση Κάνε Ιούλιος 2014 в 10:21
Σχόλια (1)