html代码：
view code
1 2 3 4 5 6 7 8 9 10 11 装入完整页面12 装入部分页面13 从远程获取数据14 15 16 17 18
19
20 21
tab2.css代码：
view code 1 ul li 2 { 3 margin: 0px; 4 padding: 0px; 5 float: left; /*向左飘 */ 6 background-color: white; 7 list-style: none; /*隐藏li的小黑点*/ 8 margin-left: 5px; 9 color: blue;10 cursor: pointer;11 }12 #content13 {14 clear: both; /*因为使用了float:left效果 去除div的环绕*/15 width: 400px;16 height: 200px;17 background-color: #f2f6fb;18 border: 1px solid black;19 position: relative;20 top: -1px;21 }22 .tabin /*页面展现默认的li的样式*/23 {24 border: black solid 1px;25 background-color: white;26 border-bottom: 0;27 z-index: 100;28 position: relative;29 }30 .divin /*页面展现默认的div样式*/31 {32 display: block;33 }34 img35 {36 display: none;37 }
tab2.js代码：
view code 1 $(document).ready(function () { //页面加载完成后事件 2 $(#realcontent).load(完整页面.htm); 3 $(li).each(function (index) { //循环每个li，index表示循环当前li的索引 4 $(this).click(function () { //为li注册点击事件 5 $(li.tabin).removeclass(tabin); //获得li下class=tabin的li去除它的样式 6 $(this).addclass(tabin); //为当前点击的li添加样式 7 if (index == 0) { 8 $(#realcontent).load(完整页面.htm); //部署到iis 发送ajax请求 9 }10 else if (index == 1) {11 $(#realcontent).load(部分页面.aspx h2); //发送ajax请求12 }13 else if (index == 2) {14 $(#realcontent).load(moneymanagerwebservice.asmx/helloworld); //发送ajax请求 请求的是web服务15 }16 });17 });18 //为loading图片绑定ajax请求开始和结束事件19 $(#content img).bind(ajaxstart, function () {20 $(#realcontent).html();21 $(this).show();22 }).bind(ajaxstop, function () {23 //$(this).hide();24 $(this).slideup(1000);//延迟1秒隐藏25 });26 })
完整页面.htm代码：
view code 1 2 3 4 5 6 7 8 9 10 11
部分页面.aspx代码：
view code 1 2 3 4 5 6 7 8 9 10 11 我是标题12
13 14 17 18 19 20
webservice服务代码：
view code 1 using system; 2 using system.collections.generic; 3 using system.linq; 4 using system.web; 5 using system.web.services; 6 using system.data; 7 using system.data.sqlclient; 8 using system.web.script.serialization; 9 10 11 /// 12 ///moneymanagerwebservice 的摘要说明13 /// 14 [webservice(namespace = http://tempuri.org/)]15 [webservicebinding(conformsto = wsiprofiles.basicprofile1_1)]16 //若要允许使用 asp.net ajax 从脚本中调用此 web 服务，请取消对下行的注释。 17 [system.web.script.services.scriptservice]18 public class moneymanagerwebservice : system.web.services.webservice19 {20 21 public moneymanagerwebservice()22 {23 24 //如果使用设计的组件，请取消注释以下行 25 //initializecomponent(); 26 }27 28 [webmethod]29 public string helloworld()30 {31 return hello world;32 }33 }
效果图：