Css实现tab标签效果(二)----------内容为动态的div
html代码：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <link rel="Stylesheet" href="Styles/tab2.css" type="text/css" />
5 <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
6 <script type="text/javascript" src="Scripts/tab2.js"></script>
7 <title></title>
8 </head>
9 <body>
10 <ul>
11 <li class="tabin">装入完整页面</li>
12 <li>装入部分页面</li>
13 <li>从远程获取数据</li>
14 </ul>
15 <div id="content" class="divin">
16 <img src="images/img-loading.gif" alt="装载中..." />
17 <div id="realcontent">
18 </div>
19 </div>
20 </body>
21 </html>
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 #content
13 {
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 img
35 {
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title></title>
6 </head>
7 <body>
8 <input type="text" />
9 <input type="button" value="查询" />
10 </body>
11 </html>
部分页面.aspx代码：
View Code
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="部分页面.aspx.cs" Inherits="部分页面" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title></title>
7 </head>
8 <body>
9 <form id="form1" runat="server">
10 <div>
11 我是标题
12 </div>
13 <h2>
14 <%
15 Response.Write("我是部分内容....");
16 %>
17 </h2>
18 </form>
19 </body>
20 </html>
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 /// <summary>
12 ///MoneyManagerWebService 的摘要说明
13 /// </summary>
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.WebService
19 {
20
21 public MoneyManagerWebService()
22 {
23
24 //如果使用设计的组件，请取消注释以下行
25 //InitializeComponent();
26 }
27
28 [WebMethod]
29 public string HelloWorld()
30 {
31 return "Hello World";
32 }
33 }
效果图：
