Wie toggle/switch-class eines div onclick nur mit javascript

Möchte ich ein div zu Schalter seiner Klasse (toggle) onclick und dann wieder zurück zum ursprünglichen Klasse onclick wieder

Mein code ist:

JS:

 function myfunc() {
    //the code over here
 }

CSS:

.normal { 
  width:25%;
  height:25%;
  background: #f00;
}

.active { 
  width:100%;
  height:100%;
  background: #f00;
}

#div{}

HTML:

<body>
  <div id="div" onclick="myfunc()">click here</div>
</body>

Können Sie versuchen, "den code hier" und sehen, was ist falsch? Ich glaube nicht, dass es jetzt funktioniert :p. Mögliche Duplikate von: stackoverflow.com/questions/507138/...
Bitte zeigen Sie Ihre versucht, code in den Platzhalter the code over here Sie in Frage..

InformationsquelleAutor Umesh Meena | 2013-09-29

Verwendung von reinem js:

<div id="div" class="normal" onclick="myfunc(this)">click here</div>

function myfunc(div) {
  var className = div.getAttribute("class");
  if(className=="normal") {
    div.className = "active";
  }
  else{
    div.className = "normal";
  }
}

InformationsquelleAutor Nishad K Ahamed

Verwenden:

JS:

//hasClass
function hasClass(elem, className) {
	return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
//toggleClass
function toggleClass(elem, className) {
	var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(" " + className + " ") >= 0 ) {
            newClass = newClass.replace( " " + className + " " , " " );
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}
document.getElementById('div').onclick = function() {
    toggleClass(this, 'active');
}

CSS:

div {
    margin:20px;
    padding:10px 15px;
    background:#FFD202;
    border-radius:5px;
    color:#222;
    display:inline-block;
    text-decoration:none;
}
.active {
    background:#000;
    color:#FFD202;
}

HTML:

<div id="div" href="#">Click a few times, toggle me!</div>

InformationsquelleAutor Ben

2
```
function myFunc(e) {
    if(e.className == 'active') {
        e.className = 'normal';
    } else {
        e.className = 'active';
    }
}
```
dann haben:
```
<div id="div" onclick="myFunc(this)">blah</div>
```
ziemlich sicher, dass beantwortet in einer Reihe von anderen Fragen, die Runde hier auch.
- Hinzugefügt mehr info, dies gilt auch für div, statt hart codieren, die div-id in das JS wie meine orig version.
- Warum fordern Sie getElementById wenn die onclick Funktion übergibt das element, nicht die ID?
- Feste der post zu verwenden.e.id ist wie es sollte. Brain fade, als ich es schrieb. Vielen Dank für die Abholung. Getestet die über diese Zeit auch für mich arbeitet.
- Warum nicht einfach e.className?
- denn das wäre viel zu logisch!! ja, mein schlechtes, wieder fixiert.
InformationsquelleAutor drinxy
2

Habe ich eine Lösung für mich wo ich will, um das Umschalten zwischen zwei Bildern mit reinem JavaScript. Ich denke, das ist durchaus eine effektive Methode der Verwendung von JavaScript.
(Ich musste zu Schalter zwischen einem plus-und einem minus-Bild-Zeichen, die auf Benutzer klicken.)

HTML -
```
<a href="#" class="plus" onclick="toggleClass(this,'minus')">Text here</a>
```
CSS
```
.plus {
  background-image: url(../img/plus-circle-grey.svg);
}

.minus {
  background-image: url(../img/minus-circle-grey.svg);
}
```
JavaScript
```
function toggleClass(e,c) {
    (e).classList.toggle(c);
}
```
Funktioniert wie ein Charme.

InformationsquelleAutor TheJCD
1

Weg von aufdringlichen JavaScript, binden Sie den event-Handler in der JavaScript auf der Seite nicht im HTML-Format (das macht für spätere Wartung):
```
function classToggle() {
    this.classList.toggle('class1');
    this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);
```
JS Fiddle demo.

InformationsquelleAutor David Thomas

tun:

function myfunc(){
  var divEle = document.getElementById("div"),
      current_class = divEle.className;
  divEle.className = (current_class == "active") ? "normal" : "active";
}

InformationsquelleAutor Sudhir Bastakoti

Einem guten Weg, Ihr dilemma ist mit der classList-API. Ich schalte Klassen mit geschachtelten for-Schleifen (für wiederkehrende Instanzen einer Klasse) und der Abfrage das Dokument etwa so:

var desiredElement = document.querySelectorAll('.light');

function switchTheme() {
    for (var i = 0; i < desiredElement.length; i++) {
        if (desiredElement[i].classList.contains('light')) {
            desiredElement[i].classList.remove('light');
            desiredElement[i].classList.add('dark');
        } else if (desiredElement[i].classList.contains('dark')) {
            desiredElement[i].classList.remove('dark');
            desiredElement[i].classList.add('light');
        }
    }
}

Durch das hinzufügen einer Schaltfläche oder einen hyperlink, um entweder führen Sie diese Funktion onclick oder href-kann ich Umschalten beliebigen element in einem HTML-Dokument mit dem Licht oder dunkel Klasse und effektiv zu einem toggle-Schalter, um die sub-design-Klassen.

Ich diese verwendet, um erstellen Sie ein dark-theme für eine website, die können Sie Umschalten auf ein leichteres Thema, die vom Benutzer, falls gewünscht.

JS:

var desiredElement = document.querySelectorAll('.light');

function switchTheme() {
  for (var i = 0; i < desiredElement.length; i++) {
    if (desiredElement[i].classList.contains('light')) {
      desiredElement[i].classList.remove('light');
      desiredElement[i].classList.add('dark');
    } else if (desiredElement[i].classList.contains('dark')) {
      desiredElement[i].classList.remove('dark');
      desiredElement[i].classList.add('light');
    }
  }
}

CSS:

.light {
  background-color: #ddd;
}

.dark {
  background-color: #333;
}

HTML:

<DOCTYPE HTML>
<html>
  <body class="light">
    <button onclick="switchTheme()">Toggle</button>
  </body>
</html>

InformationsquelleAutor swordkorn

0

Gibt es schon ein paar Antworten, aber ich denke, das ist die einfachste /prägnanteste Ansatz hier:
```
<div onclick="$(this).toggleClass("active")">click here</div>
```
- Dies ist nicht nur javascript
- Die Frage ist nicht, nur über javascript. Es fragt, wie das Umschalten einer Klasse auf einer div. Ein div ist ein html. Ich bin nur mit Hilfe von javascript wechseln die Klasse.
InformationsquelleAutor Felix Eve

Wenn Sie möchten, zu wechseln/tauschen class-A und class-B wechseln beide Klassen:

function myFunc(element) {
    element.classList.toggle("class-A");
    element.classList.toggle("class-B");
}

Und

<div onclick="myFunc(this)" />

InformationsquelleAutor A-Sharabiani

-1

Versuchen Sie es mit jquery kann diese Hilfe

html-

<div id="div1" class="normal">click here</div>
<div id="div2" class="normal">click here</div>

css-

.normal{ width:25%;height:25%;background: #f00;}
.active{ width:100%;height:100%;background: #f00;}

jquery-

$(document).ready(function(){
                $(".normal").click(function(){
                    var thisobj =  $(this);
                    if(thisobj.hasClass("active"))
                    {
                        $(this).removeClass("active");
                    }else
                    {
                        $(this).addClass("active");
                    }
                });
            });

jsfiddle

InformationsquelleAutor Ronjon

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

HTML -

CSS

JavaScript