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