<!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