<!DOCTYPE html>
<html>
<head>
<title>html5</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="reset.css">
<!-[if lt IE 8]>
<script type="text/javascript" src="html5.js"></script>
<![endif]->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<style type="text/css">
.box {margin: 30px auto; width: 500px; height: 300px;}
.left ,.right {width: 100px; background: #eaeaea;display: inline-block; margin: 0 10px; text-indent: 20px; margin-bottom: 20px;}
.tab_t { border: #ccc solid 1px; font-weight: normal;}
.tab_t a { width:65px; text-align: center; display: inline-block;}
a.tab_t_hover {color: red; background: #eaeaea; font-weight: bold;}
.tab_b {border: #ccc solid 1px; border-top: none; padding: 15px;}
</style>
<!-- javascript -->
<script type="text/javascript">
function tab_menu(cssname1,hovercss,cssname2){
$(cssname2 + ":not(:first)").hide();
$(".left").click(function(){
j = $("." + hovercss).index();
if(j>0){
v = j - 1;
}else{
v = 0;
}
$(cssname1).eq(v).addClass(hovercss).siblings().removeClass(hovercss);
$(cssname2).eq(v).fadeIn().siblings(cssname2).hide();
});
$(".right").click(function(){
j = $("." + hovercss).index();
if(j <= $("." + hovercss + ":last").index()){
v = j + 1;
}else{
v = $("." + hovercss + ":last").index();
}
$(cssname1).eq(v).addClass(hovercss).siblings().removeClass(hovercss);
$(cssname2).eq(v).fadeIn().siblings(cssname2).hide();
});
$(cssname1).mouseover(function(){
var i = $(this).index();
$(this).addClass(hovercss).siblings().removeClass(hovercss);
if($(cssname2).eq(i).is(":animated")){
$(cssname2).eq(i).stop(false,true).fadeIn().siblings(cssname2).hide();
}else{
$(cssname2).eq(i).fadeIn().siblings(cssname2).hide();
}
});
}
$(function(){
new tab_menu(".tab_t a","tab_t_hover",".tab_b_list");
})
</script>
<!-- jQuery -->
<script type="text/javascript">
</script>
<style>
</style>
</head>
<body>
<div>
<span>left</span><span>right</span>
<h3><a href="#">11</a>|<a href="#">22</a>|<a href="#">33</a>|<a href="#">44</a>|<a href="#">55</a>|<a href="#">66</a>|<a href="#">77</a></h3>
<div>
<div>
1111111
</div>
<div>
22223
</div>
<div>
33333
</div>
<div>
44444
</div>
<div>
555555
</div>
<div>
66666
</div>
<div>
777777
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号