tab切换小例子

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