使一個div標籤在兩個css類之間切換

Question

我想要做的是使用javascript更改切換按鈕的div標籤的類。 因此，當我按下按鈕一旦div標籤獲取演示課程，並且當我再次按相同的按鈕時，它將獲得隱藏課程。這可能嗎？

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"; 

但你需要先給ID給一個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>類。但是，它可能不適用於你的情況。

你也許可以在其上使用jQuery與toggle：

$('#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>