<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
overflow:hidden;
list-style:none;
306px;
}
li{
100px;
height:40px;
text-align:center;
line-height:40px;
float:left;
border:1px solid black;
}
div{
304px;
height:304px;
border:1px solid black;
display:none;
}
.show{
display:block;
}
</style>
<ul>
<li>1</li> <!--0-->
<li>2</li> <!--1-->
<li>3</li> <!--2-->
</ul>
<div class="show">1</div>
<div>2</div>
<div>3</div>
<script>
var oLi = document.getElementsByTagName("li");
var oDiv = document.getElementsByTagName("div");
for(var i=0;i<oLi.length;i++){
oLi[i].index = i;
oLi[i].onclick = function(){
for(var j=0;j<oDiv.length;j++){
oDiv[j].className = "";
}
oDiv[this.index].className = "show";
}
}
var i=0;
var timer = setInterval(function(){
i++;
console.log(timer);
},1000)
</script>
jq实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-2.2.1.min.js"></script>
<style>
div{margin:0;padding:0;184px;height:200px;border:1px solid #ccc;display:none;}
.tab{margin:0;padding:0;list-style:none;200px;overflow:hidden;}
.tab li{float:left;60px;height:30px;background:#ccc;color:#fff;border:1px solid red; text-align:center;line-height:30px;cursor:pointer; }
.on{display:block;}
.tab li.cur{background:blue;}
</style>
</head>
<body>
<ul class="tab">
<li>最新</li>
<li class="cur">热门</li>
<li>新闻</li>
</ul>
<div>11</div>
<div class="on">22</div>
<div>33</div>
<script type="text/javascript">
$('.tab li').click(function(){
// console.log($(this).index());
$('.tab li').eq($(this).index()).addClass('cur').siblings().removeClass('cur');
$('div').hide().eq($(this).index()).show();
})
</script>
</body>
</html>