天天看點
傳回

tab滑鼠經過菜單切換

<!DOCTYPE html>
<html >
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			.tab-head h2 {
				border-top: solid cornflowerblue 1px;
				border-left: solid cornflowerblue 1px;
				width: 50px;
				height: 25px;
				margin: 0;
				float: left;
				text-align: center;
			}

			.tab-content {
				border: solid cornflowerblue 1px;
				width: 152px;
				height: 100px;
			}

			.tab-content div {
				display: none;
			}

			.selected {
				background-color: cornflowerblue;
			}

			.tab-content .show {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="tab-head">
			<h2 class="selected">媒體報道</h2>
			<h2>公司新聞</h2>
			<h2>行内新聞</h2>
		</div>
		<div class="tab-content">
			<div class="show">content1</div>
			<div>content2</div>
			<div>content3</div>
		</div>

		<script type="text/javascript">
			var tabs = document.getElementsByClassName('tab-head')[0].getElementsByTagName('h2'),
				contents = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');

			(function changeTab(tab) {
				for (var i = 0, len = tabs.length; i < len; i++) {
					tabs[i].onmouseover = showTab;
				}
			})();

			function showTab() {
				for (var i = 0, len = tabs.length; i < len; i++) {
					if (tabs[i] === this) {
						tabs[i].className = 'selected';
						contents[i].className = 'show';
					} else {
						tabs[i].className = '';
						contents[i].className = '';
					}
				}
			}
		</script>
	</body>
</html>
javascript
上一篇: 汽車加油問題（貪心算法）
下一篇: ACS基本配置-權限等級管理

繼續閱讀