<html>
<head>
<title></title>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$("#header").load("header.html");
$("#content").load("content.html");
$("#footer").load("footer.html");
var b1 = $("#btn1");
var b2 = $("#btn2");
var b3 = $("#btn3");
var btnClick = function(e){
//alert("Button: "+e.currentTarget.id);
switch(e.currentTarget.id){
case("btn1"):
//alert("btn1");
$("#content").load("1.html");
break;
case("btn2"):
//alert("btn2");
$("#content").load("2.html");
break;
case("btn3"):
//alert("btn3");
$("#content").load("3.html");
break;
}
}
b1.on('click', btnClick);
b2.on('click', btnClick);
b3.on('click', btnClick);
});
</script>
<style>
</style>
</head>
<body>
<div align="center">
<input type="button" id="btn1" value="1">
<input type="button" id="btn2" value="2">
<input type="button" id="btn3" value="3">
<div id="header" style="background-color:#FFBB73;"></div>
<div id="content" style="background-color:pink;"></div>
<div id="footer" style="background-color:rgb(232,106,192);"></div>
<div>
</body>
</html>
留言列表
