Question

我想要做的是使用javascript更改切换按钮的div标签的类。因此，当我按下按钮一旦div标签获得show class，当我再次按下相同的按钮时它会获得hide类。这可能吗？

HTML：

<a id="togglebutton">Show/hide</a>

<div class="show"> 
   I want this div to toggle between the 'show' class and the 'hide' class
</div>

的CSS：

.show {
    display: block;
}


.hide {
    display: none;
}

JS：

function toggle(){
    var hide = document.querySelector(".hide");
    var show = document.querySelector(".show");

}

var hidebutton = document.querySelector(".togglebutton");
hidebutton.onclick = toggle

document.getElementById("MyId").className = "MyClass";会以某种方式使用吗？

Answer 1

您可以使用

if(document.getElementById("MyId").className == "hide")
   document.getElementById("MyId").className = "show";
else
   document.getElementById("MyId").className = "hide";

但是你首先需要给div一个ID .. 请在下面找到一个工作示例： http://jsfiddle.net/HvmmY/

Answer 2

如果您只是想显示/隐藏元素，可以使用style.display属性：

hidebutton.onclick = function(){
    var div = document.getElementsByClassName('show').item(0);
    if(div.style.display == '') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
}

希望有所帮助

Answer 3

我喜欢使用jquery来添加/删除<div>类。但是，它可能不适用于您的情况。

您可以在toggle上使用jQuery：

$('#box').click(function() { $('#box2').toggleClass('show hide'); });

工作示例： http://jsfiddle.net/mFA5F/1/

有关toggle()的信息，请点击此处：http://api.jquery.com/toggle/

Answer 4

Live Demo

window.onload=function() {
  document.getElementById("togglebutton").onclick=function() {
    var show = this.innerHTML=="Show";
    document.getElementById("toggleDiv").className=show?"show":"hide";
    this.innerHTML=show?"Hide":"Show";
  }
}

使用

<a href="#" id="togglebutton">Hide</a>

<div id="toggleDiv" class="show"> 
   I want this div to toggle between the 'show' class and the 'hide' class
</div>

在两个css类之间切换div标签

4 个答案: