<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{background: #f2f2f2;} *{margin: 0;padding: 0;} .head{ height: 80px; width: 100%; background: cornflowerblue; } .menuqq{ background: red; width: 120px; position: absolute; top: 80px; bottom: 0; left: 0; right: 0px; } .container{ position: absolute; top: 80px; right: 0; bottom: 0; left: 120px; background: lightgrey; overflow: auto; } .menu{ height: 800px; width: 200px; margin: 0 auto; background: blue; } .menu1{background: red;} .menu2{background: blue;} .menu3{background: yellow;} .menu4{background: orange;} </style> <script src="js/jquery.js"></script> </head> <body> <div class="head"></div> <div class="menuqq"> <a class="1">按钮1</a> <br /> <a class="2">按钮2</a> <br /> <a class="3">按钮3</a> <br /> <a class="4">按钮4</a> </div> <div class="container"> <!--这里就是放置内容的地方，点击左侧实现内容区切换页面--> </div> <script> $(function(){ $('a').on('click',function(){ var num = $(this).attr('class'); $('.container').load('menu' + num + '.html'); }); }); </script> </body> </html>
nume1.html:个人觉得ajax加载的内容不用写<html>这部分了，毕竟能少加载一些就少加载一些嘛
<div class="menu menu1"> </div>