<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
.tab1{
margin-left: 40px;
}
.tab1 ul li{
width: 100px;
/*margin-right: 10px;*/
float: left;
list-style: none;
}
.tab2{
width: 100%;
}
.tab2 ul{
width: 400px;
height: 100px;
background: #d74147;
/*margin-right: 10px;*/
float: left;
list-style: none;
display: none;
}
.hover{
display: block !important;
background: #dd0077 !important;
}
.current{
background: #d74147;
display: block;
width: 400px;
}
</style>
<script src="js/jquery-1.7.1.js"></script>
<script>
$(function(){
$(‘.tab1 ul li‘).on(‘click‘,function(){
var $this = $(this);
var targetContentId = $this.attr(‘data-target‘);
var $target = $(‘#‘ + targetContentId);
$(‘.tab1‘).find(‘li‘).removeClass(‘current‘);
$this.addClass(‘current‘);
$(‘.tab2‘).find(‘ul‘).removeClass(‘hover‘);
$target.addClass(‘hover‘);
});
});
</script>
</head>
<body>
<div class="tab1">
<ul>
<li class="current" data-target="content1">1</li>
<li data-target="content2">2</li>
<li data-target="content3">3</li>
<li data-target="content4">4</li>
</ul>
</div><br />
<div class="tab2">
<ul class="hover" id="content1">11111</ul>
<ul id="content2">2222</ul>
<ul id="content3">33333</ul>
<ul id="content4">4444444</ul>
</div>
</body>
</html>
原文：http://www.cnblogs.com/shenq/p/4924691.html