Home > Article > Web Front-end > Css to achieve tab tag effect (2) ----------The content is dynamic div_html/css_WEB-ITnose
Css to achieve tab tag effect (2) ----------The content is dynamic div_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:27:481051browse
html code:
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 code:
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 code:
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 })
Full page. htm code:
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>
Part of the page.aspx code:
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 service code:
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 } Rendering:
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn