Css实现tab标签效果(二)----------内容为动态的div_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:27:481060浏览
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 #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 <!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.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 } 效果图：
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn