javascript 实现tab菜单切换

浏览数：23 / 时间：2015年06月08日

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body style="text-align:center;margin-top:150px;">
<div class="tabs" id="tabs">
	<span style="color:red;" >tab1</span>
	<span>tab2</span>
	<span>tab3</span>
</div>
<div id="tabs-content">
	<p style="">tab1</p>
	<p style="display:none;">tab2</p>
	<p style="display:none;">tab3</p>
</div>
<script type="text/javascript">
	window.onload = function () {
		var tabs = document.getElementById("tabs").getElementsByTagName("span");
		for (var i = 0 ; i < tabs.length; i ++) {
			tabs[i].index = i;
			tabs[i].onclick = function () {
				//下一行this.index，请勿直接用i 或者tabs[i] 代替。 这跟javascript的异步操作有关。感兴趣的可以去了解下！
				showHide(this.index, tabs);
			}
		};
	};

	function showHide (index, tabs) {
		var obj = document.getElementById(‘tabs-content‘);
		var p = obj.getElementsByTagName(‘p‘);
		for (var i = 0; i < p.length; i ++) {
			if (i == index) {
				tabs[i].style.color = "red";
				p[i].style.display = "block";
			} else {
				tabs[i].style.color = "black";
				p[i].style.display = "none";
			}
		}
	}
</script>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。