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

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

WBOY

Freigeben： 2016-06-24 12:27:48

Original

1070 Leute haben es durchsucht

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>

Nach dem Login kopieren

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 }

Nach dem Login kopieren

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 })

Nach dem Login kopieren

完整页面.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>

Nach dem Login kopieren

部分页面.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>

Nach dem Login kopieren

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.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 }

Nach dem Login kopieren

效果图：