<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换</title>
<style type="text/css">
.box{width: 601px;height: 500px;border: 1px solid #000; }
.top{width: 601px;height: 150px;text-align: center;border-bottom: 2px solid #000}
.a{width: 300px;height: 150px;line-height: 120px;background: #477687;float: left;display: block;}
.active{background: orange;}
.txt{text-align: center}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="box">
<div class="top">
<button class="a active">1</button>
<button class="a">2</button>
</div>
<div class="txt" style="display: block">123</div>
<div class="txt" style="display:none">456</div>
</div>
<script>
$(function () {
$('.a').click(function () {
$('.a').removeClass('active');/*当前按钮添加active样式*/
$(this).addClass('active');
var txt=$(this).index('.a');
$('.txt').hide();
$('.txt:eq('+txt+')').show();
});
});
</script>
</body>
</html>
