消息关闭
    暂无新消息!
/images/editorUpload/17-08/uploadImg_946041503739817.jpg" alt="" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示隐藏</title>
</head>
<body>
<div class="btn">隐藏</div>
<h1 class="show" style="display: block;">快把我隐藏起来</h1>
</body>
<script type="text/javascript">
// 获取元素
var btn = document.getElementsByClassName('btn')[0];
var showDiv = document.getElementsByClassName('show')[0];
// 添加点击事件
btn.onclick = function(){
if (showDiv.style.display = 'block') {
btn.innerHTML = '显示';
showDiv.style.display = 'none';
}else{
btn.innerHTML = '隐藏';
showDiv.style.display = 'block';
}
}
</script>
</html>

4个回答

︿ 1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏</title>
</head>
<body>
    <div class="btn">隐藏</div>
    <h1 class="show" >快把我隐藏起来</h1>
</body>
<script type="text/javascript">
window.onload=function(){
    var btn = document.getElementsByClassName('btn')[0];
    // 添加点击事件
    btn.onclick = function(){   
// 获取元素   
    var showDiv = document.getElementsByClassName('show')[0];
        if (showDiv.style.display =='block') {
            btn.innerHTML = '显示';
            showDiv.style.display = 'none';
        }else{
            btn.innerHTML = '隐藏';
            showDiv.style.display = 'block';
        }       
    }
}
</script>
</html>