Css实现tab标签效果(二)----------内容为动态的div_html/css_WEB-ITnose

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 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="部分页面.aspx.cs" Inherits="部分页面" %> 2  3  4  5  6      7  8  9     
10     
11         我是标题12     
13     
14         <%15             Response.Write("我是部分内容....");16         %>17     
18     
19 20 

webservice服务代码：

ImgGood

免费在线AI照片编辑器

下载

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 }

效果图：