Css实现tab标签效果(一)----------内容为静态的div
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 runat="server">
4 <title></title>
5 <link rel="Stylesheet" href="Styles/tab.css" type="text/css" />
6 <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
7 <script type="text/javascript" src="Scripts/tab.js"></script>
8 </head>
9 <body>
10 <ul>
11 <li class="tabin">标签1</li>
12 <li>标签2</li>
13 <li>标签3</li>
14 </ul>
15 <div class="divin">内容1</div>
16 <div>内容2</div>
17 <div>内容3</div>
18 </body>
19 </html>
tab.css文件：
View Code
1 ul li
2 {
3 margin: 0px;
4 padding: 0px;
5 float: left;/*向左飘 */
6 background: #868686;
7 list-style: none;/*隐藏li的小黑点*/
8 margin-left: 5px;
9 color: red;
10 border: solid white 1px;
11 }
12 div
13 {
14 clear: both;/*因为使用了float:left效果 去除div的环绕*/
15 width: 300px;
16 height: 200px;
17 background-color: #6E6E6E;
18 margin-bottom: 3px;
19 display: none;/*默认是隐藏*/
20 }
21 .tabin /*页面展现默认的li的样式*/
22 {
23 border: #6E6E6E solid 1px;
24 background-color: #6E6E6E;
25 }
26 .divin /*页面展现默认的div样式*/
27 {
28 display: block;
29 }
tab.js文件：
View Code
1 $(document).ready(function () { //页面加载完成后事件
2 var settimeid; //声明延时时间变量
3 $("li").each(function (index) { //循环每个li，index表示循环当前li的索引
4 $(this).mouseover(function () { //this表示当前的li,为当前的li加上鼠标移动事件
5 var linode = $(this); //将当前的li对象存储到一个变量
6 settimeid = setTimeout(function () { //设置延时事件并保存到延时变量
7 $("li.tabin").removeClass("tabin"); //获得li下class=tabin的li去除它的样式
8 linode.addClass("tabin"); //为当前的li加上样式
9 $("div.divin").removeClass("divin"); //获得div下class=divin的div去除它的样式
10 $("div").eq(index).addClass("divin"); //为当前div加上样式
11 }, 300); //300表示鼠标移动到li标签上延时300毫秒执行操作
12
13 }).mouseout(function () { //鼠标移出事件
14 clearTimeout(settimeid); //清除定时操作
15 });
16 })
17 })
效果图：
