看了jQuery的视频做的标签页。自己也顺便敲了一下代码。
效果图如下：
鼠标移动到标签1上：
鼠标移动到标签2上时
鼠标移动到标签3上
感觉很神秘，其实当实现了就会觉得简单了。就是利用css和JavaScript实现的。
解决方案：
asp.net的代码如下：
<head runat="server">
<title>标签页</title>
<script src="jQuery.js" type="text/javascript"></script>
<script src="tab.js" type="text/javascript"></script>
<link href="tab.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul>
<li class="tabin"> 标签1</li>
<li class="tabin"> 标签2</li>
<li class="tabin">标签 3</li>
</ul>
<div class="contentfirst"> 我是内容1</div>
<div class="contentfirst" > 我是内容2</div>
<div class="contentfirst"> 我是内容3</div>
</body>
css代码：
ul, li
{
margin: 0px;
padding: 0px;
list-style: none;
}
li
{
float: left;
background-color: Gray;
color: White;
padding: 5px;
margin-right: 2px;
border:1px solid white;
}
div.contentfirst
{
clear: left;
background-color: #6e5e6e;
color: White;
padding: 10px;
width: 300px;
height: 100px;
display: none;
}
div.contentin
{
display: block;
}
javascript代码：
var timeoutid;
$(document).ready(class="tags" href="/tags/FUNCTION.html" title=function>function() {
$("li").each(class="tags" href="/tags/FUNCTION.html" title=function>function(index) {
//每一包装li的jquery对象都会执行class="tags" href="/tags/FUNCTION.html" title=function>function中的代码
//index是当前执行这个class="tags" href="/tags/FUNCTION.html" title=function>function代码的li对应在所有li组成的数组中的索引值
//有了index的值之后，就可以找到当前标签对应的内容区域。
$(this).mouseover(class="tags" href="/tags/FUNCTION.html" title=function>function() {
var liNode = $(this);
//将原来显示的内容区域进行隐藏
timeoutid = setTimeout(class="tags" href="/tags/FUNCTION.html" title=function>function() {
$("div.contentin").removeClass("contentin");
//对有tabin 的class定义的li清除tabin 的class
$("li.tabin").removeClass("tabin");
// 当前标签所对应的内容区域显示出来
$("div").eq(index).addClass("contentin");
liNode.addClass("tabin");
}, 300);
}).mouseout(class="tags" href="/tags/FUNCTION.html" title=function>function() {
clearTimeout(timeoutid);
});
});
另外还有一个jQuery代码，这个是jQuery的源码地址：http://u.115.com/file/f79258366
还有一种标签页形式正在实现中。。
JavaScript很好玩`~~~~~~
div> div> <div id="treeSkill">div>
