<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";} a{color:#333;text-decoration:none;} a:hover{color:#3366cc;text-decoration:underline;} .demopage{width:1060px;margin:0 auto;} .demopage h2{font-size:14px;text-align:center;} /* tabbox */ .tabbox{width:932px;margin:20px auto;position:relative;height:171px;overflow:hidden;} .tabbox .tabbtn{height:30px;background:url(images/tabbg.gif) repeat-x;border-left:solid 1px #ddd;border-right:solid 1px #ddd;} .tabbox .tabbtn li{float:left;position:relative;margin:0 0 0 -1px;} .tabbox .tabbtn li a,.tabbox .tabbtn li span{display:block;float:left;height:30px;line-height:30px;overflow:hidden;width:108px;text-align:center;font-size:12px;cursor:pointer;} .tabbox .tabbtn li.current{border-left:solid 1px #d5d5d5;border-right:solid 1px #d5d5d5;border-top:solid 1px #c5c5c5;} .tabbox .tabbtn li.current a,.tabbox .tabbtn li.current span{border-top:solid 2px #ff6600;height:27px;line-height:27px;background:#fff;color:#3366cc;font-weight:800;} .tabbox .loading{height:40px;width:432px;text-align:center;position:absolute;left:0;top:120px;} .tabbox .tabcon{padding:10px;border-width:0 1px 1px 1px;border-color:#ddd;border-style:solid; margin-left:99px;} .tabbox .tabcon li{height:24px;line-height:24px;overflow:hidden;} .tabbox .tabcon li span{margin:0 10px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;} </style> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> //tab plugins 插件 $(function(){ $thisWeek = 0; $thisWeek = getWeek(); //选项卡鼠标滑过事件 $('#statetab .tabbtn li').mouseover(function(){ TabSelect("#statetab .tabbtn li", "#statetab .tabcon", "current", $(this)) }); $('#statetab .tabbtn li').eq($thisWeek).trigger("mouseover"); $('#statetab .tabbtn li').eq($thisWeek).html('<a>今天</a>'); //选项卡鼠标滑过事件 $('#clicktab .tabbtn li').click(function(){ TabSelect("#clicktab .tabbtn li", "#clicktab .tabcon", "current", $(this)) }); $('#clicktab .tabbtn li').eq($thisWeek).trigger("click");
//注释见下文。 function TabSelect(tab,con,addClass,obj){ var $_self = obj; var $_nav = $(tab); $_nav.removeClass(addClass), $_self.addClass(addClass); var $_index = $_nav.index($_self); var $_con = $(con); $_con.hide(), $_con.eq($_index).show(); } function getWeek() { //setResponse(response); var today = 0; var today = new Date(); var weekday=new Array(7) weekday[0]=6; weekday[1]=0; weekday[2]=1; weekday[3]=2; weekday[4]=3; weekday[5]=4; weekday[6]=5; var d=weekday[today.getDay()]; //console.log(today); //console.log(d+"---"+today.getSeconds()); return d; } function getWeek1() { var today = new Date(); var d=today.getSeconds(); d=today.getDay(); //var d=today.getDay(); console.log(d); return d; } }); </script> </head> <body> <div class="demopage"> <h2>静态 选项卡 滑过事件</h2> <div class="tabbox" id="statetab"> <div style="float:left; padding:0 20px 0 20px; font-weight:bold; font-size:14px; ">筛选查询</div> <ul class="tabbtn"> <li><a>星期一</a></li> <li><a>星期二</a></li> <li><a>星期三</a></li> <li><a>星期四</a></li> <li><a>星期五</a></li> <li><a>星期六</a></li> <li><a>星期日</a></li> </ul><!--tabbtn end--> <div class="tabcon"> <ul> <li><span>▪</span><a href="">a</a></li> <li><span>▪</span><a href="">a1</a></li> <li><span>▪</span><a href="">a2</a></li> </ul> </div><!--tabcon end--> <div class="tabcon"> <ul> <li><span>▪</span><a href="">b</a></li> </ul> </div><!--tabcon end--> <div class="tabcon"> <ul> <li><span>▪</span><a href="">c</a></li> </ul> </div><!--tabcon end--> <div class="tabcon"> <ul> <li><span>▪</span><a href="">d</a></li> </ul> </div><!--tabcon end--> <div class="tabcon"> <ul> <li><span>▪</span><a href="">e</a></li> </ul> </div><!--tabcon end--> <div class="tabcon"> <ul> <li><span>▪</span><a href="">f</a></li> </ul> </div><!--tabcon end--> <div class="tabcon"> <ul> <li><span>▪</span><a href="">g</a></li> </ul> </div><!--tabcon end--> </div><!--tabbox end--> </div><!--demopage end--> </body> </html>
function TabSelect(tab,con,addClass,obj){ var $_self = obj; //鼠标移上去的当前元素li var $_nav = $(tab); //所有li (星期1-7) $_nav.removeClass(addClass); //移除所有li样式 $_self.addClass(addClass); //当前li增加该样式 var $_index = $_nav.index($_self); //获取当前li的索引值 var $_con = $(con); //下面的所有div元素 $_con.hide(); //所有div元素隐藏 $_con.eq($_index).show(); //当前div元素显示(对应于上面的li索引值) }