(jQuery) Div-Stil von "display:none" auf "display:inline" umschalten

Question

Ich habe 2 divs, die und ich möchte in der Lage sein, zwischen ihnen onClick einer Schaltfläche (derzeit mit .toggle();) umzuschalten

Das div, das auf der Seite angezeigt wird, ist div1. Dieses div hat den Stil 'display:inline'. Mein anderes div (div2) beginnt mit dem Stil "display:none".

Wenn das div1 zu div2 wechselt, möchte ich, dass div2 den Stil "display:inline" hat. Wie kann ich das tun?

EDIT: Jetzt funktioniert es:

$(function(){
  $('#button').click(function(){

    $('#div1').toggleClass('hide');

if ($('#div2').is('.hidden')) {

          $('#div2').removeClass('hidden');
          $('#div2').addClass('show');

      }
      else{

          $('#div2').addClass('hidden');
          $('#div2').removeClass('show');

      }

  });
});

Answer 1

Ich würde verwenden .toggleClass() als Kippschalter zwischen display: inline; y display: block;

Erstellen Sie eine versteckte und eine Inline-Klasse und schalten Sie diese einfach um.

Answer 2

Mit einfachem JavaScript könnten Sie verwenden:

document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'inline';

Answer 3

Hier ist eine einfache Möglichkeit, dies zu tun:

1. Für die HTML haben wir eine einfache Schaltfläche zum Aufrufen der "toggleFunction", die unseren Div-Elementen je nach Bedarf Anzeigeklassen hinzufügt oder entfernt.

   <button onclick="toggleFunction()" >Click to toggle</button>

   <div id="div1" class=" " > Now showing "Div 1" </div>

   <div id="div2" class=" " > Now showing "Div 2" </div>

2. Wir legen die Standardanzeigeeigenschaften von Abteilung 1 y Abteilung 2 auf "inline" bzw. "keine", so dass standardmäßig:

   • Abteilung 1 wird angezeigt, und
   • Abteilung 2 ist verborgen.

Hier ist das Css dafür:

#div1 {
    display: inline;
    color:blue;
}

#div2 {
    display: none;
    color:red;
}

.display-none {
    display: none !important;
}

.display-inline {
    display: inline !important;
}

3. Schließlich verwenden wir Jquery, um die Klassen "display-none" und "display-inline" zu Div 1 bzw. Div 2 hinzuzufügen und zu entfernen, indem wir unsere "toggleFunction" aufrufen, wenn die Schaltfläche angeklickt wird.

Hier ist die Jquery für das:

  function toggleFunction() {
    $("#div1").toggleClass("display-none");    
    $("#div2").toggleClass("display-inline");    
  }

Sie können es hier auf codepen ausprobieren: http://codepen.io/anon/pen/vEbXwG

Answer 4

Machen Sie Ihr eigenes if Klausel, um den Stil des Divs umzuschalten:

$(document).on("click","#mybutton",function(){
  var toggled=$("#mydiv");

  // instead of this which would make a block appear
  // toggled.toggle();

  // do this: create your own toggle if clause.
  if(toggled.is(":visible"))
    toggled[0].style.display="none";
  else
    toggled[0].style.display="inline";
});

#mydiv{
 display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mydiv">hello</div>
<button id="mybutton">toggle</button>