jquery tab选项卡切换-优快云博客

本文介绍了一个基于jQuery的选项卡插件实现方法，通过鼠标滑过和点击事件切换不同的内容面板，适用于网页中常见的筛选查询场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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索引值）
	}