<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
/* acttabbox */
.acttabbox{width:500px;height:300px;overflow:hidden;padding:4px;border:solid 1px #690501;margin:40px auto;}
.tabcon{float:left;width:300px;height:300px;overflow:hidden;margin-right:-2px;}
.tabcon li{width:300px;height:300px;}
.tabcon li img{width:300px;height:300px;float:left}
.tabnav{float:right;width:200px;}
.tabnav li{float:left;position:relative;margin:-1px 0 0 0;height:99px;border:1px solid #000;overflow:hidden;width:288px;height:99px;}
.tabnav .cur{border:1px solid #ccc;z-index:9;}
</style>
<div class="acttabbox">
<ul class="tabnav">
<li class="cur">111111111</li>
<li>22222222</li>
<li>333333333</li>
</ul>
<ul class="tabcon">
<li> aaaaaaaaaaaa</li>
<li>bbbbbbbbb</li>
<li>ccccccccccccccc</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
function showTab(index){
$('.tabnav li').eq(index).addClass('cur').siblings().removeClass('cur');
$('.tabcon li').eq(index).stop(true,true).slideDown('slow').siblings().slideUp('slow');
}
$('.tabnav li').click(function(){
var index=$(this).index();
showTab(index);
});
});
</script>
</body>
</html>
竖版
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;word-wrap:break-word;word-break:break-all }
/* acttabbox */
.acttabbox{width:200px;height:300px;overflow:hidden;border:solid 1px #000;margin:40px auto;}
.tabnav{float:left;width:200px;}
.tabnav li{float:left;position:relative;margin:1px;height:20px;border:1px solid #000;overflow:hidden;width:100%;height:20px;}
.tabnav .cur{border:1px solid #ccc;}
.tabcon{float:left;width:200px;}
.tabcon li{width:200px;height:240px;}
</style>
<div class="acttabbox">
<ul class="tabnav">
<li class="cur">111111111</li>
<li>22222222</li>
<li>333333333</li>
</ul>
<ul class="tabcon">
<li> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</li>
<li>ccccccccccccccccccccccccccccccccccccccccccc</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
function showTab(index){
$('.tabnav li').eq(index).addClass('cur').siblings().removeClass('cur');
$('.tabcon li').eq(index).stop(true,true).slideDown('slow').siblings().slideUp('slow');
}
$('.tabnav li').click(function(){
var index=$(this).index();
showTab(index);
});
});
</script>
</body>
</html>
