实现效果：不同导航对应切换到不同的区域
思路：
导航一般用ul列表，对应区域用div,这样实现比较方便；
导航高亮的时候，其他兄弟li标签的样式为默认样式；
高亮导航对应区域div显示（display:block;）的时候，其他兄弟div标签为隐藏（display:none;）;
ul的子元素li个数的个数应该和.oDiv下面的div个数相同，且一一对应；
知识点：
$(this).index();//获取li的下标（$(this)谁调用就会指向谁，否则就是指向windows）
eq(1);//jQuery里面的方法，选择第一个
addClass();//给元素添加class名
siblings();//表示选中除了自己其他的兄弟标签
removeClass();//移除元素的class名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.oUl{
overflow: auto;
zoom: 1;
margin-bottom:10px;
}
.oUl li{
cursor: pointer;
float: left;
height:20px;
width:20px;
padding: 10px;
margin-right:10px;
background-color: gray;
}
.oUl li.active{
color: red;
}
.oDiv{
height:200px;
width:200px;
border: 1px solid #000;
}
.oDiv div{
display: none;
}
.oDiv div.active{
display: block;
}
</style>
</head>
<body>
<ul class="oUl">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="oDiv">
<div class="one active">
one
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
</div>
</body>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(".oUl li").on("click",function(){
var i = $(this).index();//获取li的下标
$(".oUl li").eq(i).addClass("active").siblings().removeClass("active");
$(".oDiv>div").eq(i).addClass("active").siblings().removeClass("active");
});
</script>
</html>
写的样式略丑陋，请自行修改自己需要的样式，tab切换功能思路相同。