html
<div class="nav">
<ul >
<li class="act"><a href="javascript:;">标题1</a></li>
<li><a href="javascript:;">标题2</a></li>
<li><a href="javascript:;">标题3</a></li>
</ul>
</div>
<div class="tabBox">
<div class="box">内容1</div>
<div class="box">内容2</div>
<div class="box">内容3</div>
</div>
```javascript
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(".box").hide();
$(".box:eq(0)").show();
$(".nav ul li").click(function(){
$(this).addClass('act').siblings('li').removeClass('act');
console.log($(this).index())
var i = $(this).index();
$(".box").hide();
$(".box:eq("+i+")").show();
})
</script>
.nav ul{width:200px;overflow:hidden;zoom:1;} .nav ul li{float: left;border-right: 1px solid #717070;} .nav ul li:last-child{border: none;} .nav ul li a{display: block; width: 125px;height: 38px;line-height: 38px;background: #4e4c4c;text-align: center;color: #ffffff;} .nav ul li.act a{background: #4bb1e5;}