2

divクラスを切り替えて（トグル）onclickしてから、元のクラスonclickに再び戻したい

私のコードは次のとおりです。

 function myfunc() {
    //the code over here
 }
.normal { 
  width:25%;
  height:25%;
  background: #f00;
}

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

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

4

10 に答える 10

11

純粋なjsを使用：

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

js

function myfunc(div) {
  var className = div.getAttribute("class");
  if(className=="normal") {
    div.className = "active";
  }
  else{
    div.className = "normal";
  }
}
于 2013-09-29T07:28:54.357 に答える
3

使用する：

// 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');
}
div {
    margin:20px;
    padding:10px 15px;
    background:#FFD202;
    border-radius:5px;
    color:#222;
    display:inline-block;
    text-decoration:none;
}
.active {
    background:#000;
    color:#FFD202;
}
<div id="div" href="#">Click a few times, toggle me!</div>

于 2015-06-21T10:15:38.327 に答える
2

私は、純粋な JavaScript を使用して 2 つの画像を切り替えたいソリューションを自分で探していました。これは JavaScript を使用する非常に効果的な方法だと思います。(ユーザーがクリックすると、プラス記号とマイナス記号を切り替える必要がありました。)

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

魅力のように機能します。

于 2016-04-21T13:58:38.807 に答える
2 
function myFunc(e) {
    if(e.className == 'active') {
        e.className = 'normal';
    } else {
        e.className = 'active';
    }
}

次に持っています：

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

ここにある他の多くの質問でも答えられていることは間違いありません。

于 2013-09-29T06:29:29.780 に答える
0

行う：

function myfunc(){
  var divEle = document.getElementById("div"),
      current_class = divEle.className;
  divEle.className = (current_class == "active") ? "normal" : "active";
}
于 2013-09-29T06:32:19.817 に答える
-1

jqueryで試してみてください

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

于 2013-09-29T07:23:04.097 に答える