<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TAB</title>
<style>
.clearfix{
overflow: hidden;
}
ul li{
list-style: none;
float: left;
padding: 5px 10px;
margin: 0 5px;
border:1px solid red;
background:#eee;
}
ul li a{
text-decoration: none;
}
.selected{
background: red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="mainTab">
<ul class="tabTitle clearfix">
<li class="selected"><a href="javascript:;">TAB1</a></li>
<li class="tabBox"><a href="javascript:;">TAB2</a></li>
<li class="tabBox"><a href="javascript:;">TAB3</a></li>
</ul>
<div class="tabContent">
选择内容1111
</div>
<div class="tabContent">
选择内容2222
</div>
<div class="tabContent">
选择内容3333
</div>
</div>
<script>
$(function(){
$('.tabContent').not($('.tabContent').eq(0)).hide();
$('.tabTitle li').click(function(){
var index = $(this).index();
// console.log(index);
$(this).attr('class','selected').siblings('li').attr('class','tabBox');
$('.tabContent').eq(index).show(200).siblings('.tabContent').hide();
})
})
</script>
</body>
</html>
