JQuery学习——标签页效果二
我们最终实现的效果如图所示：
当单击标签一的时候，下面加载的是一个html的全部内容；当单击标签二的时候，下面加载的是一个asp.net页面的一部分内容，标签三未添加效果。
页面前台的代码如图：
[html]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/tab.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/tab.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="firstDiv">
<ul>
<li class="tabin">标签一</li>
<li>标签二</li>
<li>标签三</li>
</ul>
<div class="contentin">
我是标签一的内容</div>
<div>
我是标签二的内容</div>
<div>
我是标签三的内容</div>
</div>
<br />
<br />
<br />
<div id="secondDiv">
<ul>
<li class="tabin">标签一</li>
<li>标签二</li>
<li>标签三</li>
</ul>
<div id="secondContentin">
<img alt="装载中" src="images/img-loading.gif" />
<div id="realContentin"></div>
</div>
</div>
</form>
</body>
</html>
tab.css
[css]
ul,li
{
list-style:none;
margin:0;
padding:0;
}
#firstDiv li
{
background-color:#6E6E6E;
float:left;
color:White;
padding:5px;
margin-right:3px;
border: 1px solid white;
}
#firstDiv .tabin
{
border:1px solid #6E6E6E;
}
#firstDiv div
{
clear:left;
background-color:#6E6E6E;
width:200px;
height:100px;
display:none;
}
#firstDiv .contentin
{
display:block;
}
#secondDiv li
{
float:left;
color:Blue;
background-color:White;
padding:5px;
margin-right:3px;
/*当鼠标放在标签上时，显示成小手*/
cursor:pointer;
}
#secondDiv li.tabin
{
background-color:#F2F6F8;
border:1px solid black;
border-bottom:0;
/*只有position设置成relative或者absolute的时候z-index才有效*/
position:relative;
z-index:100;
}
#secondContentin
{
width:300px;
height:200px;
padding:10px;
background-color:#F2F6F8;
clear:left;
border:1px solid black;
/*下面是让底下的内容向上移动一个像素
*但是，我们可以看到，并没有达到我们想要的效果，接下
*来要上上面的li显示层次在最上面，这样就盖住了下面的div的border
*/
position:relative;
top:-1px;
}
/*开始的时候让loading图片隐藏*/
img
{
display:none;
}
关于z-index的问题，注释上有说明，下面的截图是我截的js手册上的内容：
tab.js
[javascript]
/// <reference path="jquery.js" />
$(document).ready(function () {
var setTimeouId;
$("#firstDiv li").each(function (index) {
$(this).mouseover(function () {
var nodeTabin = $(this);
setTimeouId = setTimeout(function () {
$("#firstDiv .contentin").removeClass("contentin");
$("#firstDiv .tabin").removeClass("tabin");
$("#firstDiv div").eq(index).addClass("contentin");
&n
补充：web前端 , JavaScript ,
- 更多JAVA疑问解答：
- java怎么在线读取ftp服务器上的文件内容
- 关于程序员的职业规划
- HTML和JSP矛盾吗？
- java小程序如何打包？
- java怎么split路径文件名？
- 关于Hibernate实体自身多对一的抓取问题
- 关于apache2+tomcat群集出现的问题
- SSH 导入导出excel 谁有这块的资料吗?
- springmvc 加载一个jsp页面执行多个方法 报404
- 关于用jquery 导入 excel
- java对时间进行循环放到List中
- 一个图片的输入输出程序，第一次调用某方法会中断，第二次调用则正常
- 请上过传智播客的人说一下传智播客怎么样呀！是不是像它说的那样好呀！
- spring的schema怎么配置
- 【菜鸟求助】SSH中怎么从JSP页面往后台传值呢