WEB前端：03_hover切换(显示/隐藏)

浏览数：13 / 时间：2015年06月09日

hover切换(显示/隐藏)

网站常用效果之一，以下为简化版，用于学习javascript基础知识。

效果图：

hover显示/隐藏切换 - 纯JS简化版

<html>
<head>
<meta http-equiv="Content-Type" 
content="text/html; charset=utf-8">
<title>hover显示/隐藏切换 - 纯JS简化版</title>
<style type="text/css">
 
*{margin: 0; padding: 0;}
 
#hoverbox {margin:10px; width: 500px;}
#hovertit {background: #666; padding: 10px;color: #fff;}
#hoverdiv { display: none; border: 1px solid #666; padding: 10px;}
 
</style>
<script type="text/javascript">
window.onload = function() {
     
    var 
hovertit = document.getElementById(‘hovertit‘);
    var 
hoverdiv = document.getElementById(‘hoverdiv‘);
 
    hovertit.onclick = function() {
        //hoverdiv.style.display = hoverdiv.style.display == ‘block‘ ? ‘none‘ : ‘block‘;
        if(hoverdiv.style.display == ‘block‘) {
            hoverdiv.style.display = ‘none‘;
        } else 
{
            hoverdiv.style.display = ‘block‘;
        }
    }
}
</script>
</head>
<body>
 
<div class="hoverbox">
    <div id="hovertit">小标题一</div>
    <div id="hoverdiv">小标题内容一</div>
</div>
 
</body>
</html>

hover显示/隐藏切换[版本二]

<html>
<head>
<meta http-equiv="Content-Type" 
content="text/html; charset=utf-8">
<title>hover显示/隐藏切换 - 纯JS简化版</title>
<style type="text/css">
 
*{margin: 0; padding: 0;}
 
.hoverbox {margin:10px; width: 500px;}
.hovertit {background: 
#666; padding: 10px;color: #fff;}
.hoverdiv { display: none; border: 1px solid 
#666; padding: 10px;}
 
</style>
<script type="text/javascript">
window.onload = function() {
     
    function 
getClass(elem, elements) {
        var 
tags = elem.getElementsByTagName(‘*‘);
        var 
arr = [];
        for(var 
i=0; i<tags.length; i++) {
            if(tags[i].className == elements) {
                arr.push(tags[i]);
            }
        }
        return 
arr;
    }
 
    var 
hoverbox = getClass(document, ‘hoverbox‘);
 
    for(var 
b=0; b<hoverbox.length; b++) {
        getClass(hoverbox[b], ‘hovertit‘)[0].index = b;
        getClass(hoverbox[b], ‘hovertit‘)[0].onclick = function() {
            if(getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display == ‘block‘) {
                getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display = ‘none‘;
            } else 
{
                getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display = ‘block‘
            }
            //getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display = getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display == ‘block‘ ? ‘none‘ : ‘block‘;
        }
    }
 
}
</script>
</head>
<body>
 
<div class="hoverbox">
    <div class="hovertit">小标题一</div>
    <div class="hoverdiv">小标题内容一</div>
</div>
 
<div class="hoverbox">
    <div class="hovertit">小标题二</div>
    <div class="hoverdiv">小标题内容二</div>
</div>
 
</body>
</html>