－－－－－－－－－css
ui,li { margin:0; padding:0; list-style:none; }li { float:left; background=color:#868688; color:black; padding:5px; margin-right:2px; boder:1px solid:white; } li.tabin{ background-color:#6e6e6e; boder:1px solid:#6e6e6e;}div { clear:left; background-color:#6e6e6e; color:white; width:300px; hight:100px; padding:10px; display:none;
} div.contentin{ display:block;}
---------tab.html
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JQuery-标签页效果</title> <link type="text/css" rel="stylesheet" href="css/tab.css"> <script type="text/javascript" src="../../jquery-1.5.1.js"></script> <script type="text/javascript" src="tab.js"></script></head>
<body> <ui> <li class="tabin">标签1</li> <li class>标签2</li> <li class=>标签3</li> <div class="contentin">内容1</div> <div>内容2</div> <div>内容3</div> </body></html>
----------tab.js
$(function(){ //找到所有标签 /*$("li").mouseover(function(){ //将原来显示的内容区域进行隐藏 // $("div.contentin").hide(); //当前标签所对应的内容区域显示出来 // alert("mouse over"); }).mouseout(function(){ //将当前标签对应的内容区域隐藏 alert("mouse out"); */ $("li").each(function(index){ //每一个包装li的Jquery对象都会执行function中的代码 //index是当前执行这个function代码的li对应在所有li组成的数组中索引值 //有了index的值之后，就可以找到当前标签对应的内容区域 $(this).mouseover(function(){ //将原来显示的内容区域进行隐藏 $("div.contentin").removeClass("contentin"); //对有tabin的class定义的li清除tabin的class $("li.tabin").removeClass.("tabin"); //当前标签所对应的内容区域显示出来 $("div").eq(index).addClass("contentin"); $(this).addClass("tabin"); })
