星空网 > 软件开发 > Java

javascript 实现tab菜单切换

<!DOCTYPE html><html><head>	<title></title></head><body ><div id="tabs">	<span >tab1</span>	<span>tab2</span>	<span>tab3</span></div><div id="tabs-content">	<p >tab1</p>	<p >tab2</p>	<p >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>

  




原标题:javascript 实现tab菜单切换

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

AstroPay:https://www.ikjzd.com/w/1573153057152606209
T-HUB:https://www.ikjzd.com/w/1573153058301845505
ATEX认证:https://www.ikjzd.com/w/1573153063762829314
Atome Financial:https://www.ikjzd.com/w/1573153065017270273
傲天转运:https://www.ikjzd.com/w/1573153065629294593
Auchan(欧尚):https://www.ikjzd.com/w/1573153066384269314
从园岭新村到大梅沙海滨总站坐什么车:https://www.vstour.cn/a/363191.html
七月份适合去日本旅游吗 7月份去日本哪里好玩:https://www.vstour.cn/a/363192.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流