<!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>
新闻热点
疑难解答
