<!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 () {
$('button').click(function () {
$('button').removeClass('active');/*当前按钮添加active样式*/
$(this).addClass('active');var txt=$(this).index('button');
$('.txt').hide();
$('.txt:eq('+txt+')').show();
});});
</script>
</body>
</html>
.box{width:1103px;height: 789px} .lf{ width: 23%;height: 789px;text-align: center;float: left;list-style: none;} ul{height: 100%;width: 100%} .a{ width: 100%;line-height: 50px;background: #e3eefd;float: left;display: block;} .active{background: orange;} .txt11{float: left;width: 77%;height: 100%}
<div class="box"> <div class="lf"> <ul> <li class="a active">1</li> <li class="a">2</li> </ul> </div> <div class="txt11" style="display: block">123</div> <div class="txt11" style="display:none">456</div> </div> <script> $(function () { $('li').click(function () { $('li').removeClass('active');/*当前按钮添加active样式*/ $(this).addClass('active'); var txt=$(this).index('li'); $('.txt11').hide(); $('.txt11:eq('+txt+')').show(); }); }); </script>