<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* CSS Document */
html,body,div,ul,li,p,input,a,span,img,a,hr,h3,h5,h2{ margin:0; padding:0;}
ul{ list-style:none;}
a{ text-decoration:none;}
img{ border:none;}
.center_right{ width:900px; overflow:hidden; margin:0 auto; padding-left:40px;}
.center_right .txt{width:900px; overflow:hidden;}
.center_right .txt ul{width:900px; height:46px;}
.center_right .txt ul li{width:150px; height:46px; line-height:35px; float:left; text-align:center; }
.center_right .txt ul li a{ color:#000; display:block; width:148px; height:34px;background:#fcf3f3; border:1px #ccc solid;}
.center_right .txt ul li.active{ background:yellow;}
.center_right .txt ul li a.a_this{ border-bottom:none; color:#FFF;background: none; }
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<!--tab切换-->
<div class="center_right">
<div class="txt">
<ul class="tab_content">
<li><a id="first" href="#">111111</a></li>
<li><a href="#">22222222</a></li>
<li><a href="#">333333</a></li>
</ul>
</div>
<div class="photo">
<ul>
<a href="###"><li><div class="txt02"><p>1111111111....</p></div></li></a>
<a href="###"><li><div class="txt02"><p>1111111111....</p></div></li></a>
<a href="###"><li><div class="txt02"><p>1111111111....</p></div></li></a>
</ul>
</div>
<div class="photo" style="display:none;">
<ul>
<a href="###"><li><div class="txt02"><p>22222222222....</p></div></li></a>
<a href="###"><li><div class="txt02"><p>22222222222....</p></div></li></a>
<a href="###"><li><div class="txt02"><p>22222222222....</p></div></li></a>
</ul>
</div>
<div class="photo" style="display:none;">
<ul>
<a href="###"><li><div class="txt02"><p>333333333333....</p></div></li></a>
<a href="###"><li><div class="txt02"><p>333333333333....</p></div></li></a>
<a href="###"><li><div class="txt02"><p>333333333333....</p></div></li></a>
</ul>
</div>
<!--tab切换结束-->
<script>
$(function(){
window.onload = function(){
var $li = $('.tab_content li');
var $ul = $('.photo');
var $a=$('.tab_content li a');
$a.mouseover(function(){
var $this=$(this);
var $n=$this.index();
$a.removeClass('a_this');
$this.addClass('a_this');
})
$li.mouseover(function(){
var $this = $(this);
var $t = $this.index();
$li.removeClass('active');
$this.addClass('active');
$ul.css('display','none');
$ul.eq($t).css('display','block');
})
}
});
</script>
</body>
</html>