zoukankan      html  css  js  c++  java
  • WEB前端:03_hover切换(显示/隐藏)

    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;  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;  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>
    
  • 相关阅读:
    04-JQuery
    03-JavaScript
    02-CSS&JS
    01-HTML
    [LeetCode]Insert Interval
    [shell编程]正则表达式
    [LeetCode]Jump Game II
    [LeetCode]Jump Game
    [LeetCode]Wildcard Matching
    [shell编程]初识sed和gawk
  • 原文地址:https://www.cnblogs.com/haicheng/p/3703720.html
Copyright © 2011-2022 走看看