网站常用tab选项卡切换

最新推荐文章于 2020-02-12 19:05:40 发布

俟河之清

最新推荐文章于 2020-02-12 19:05:40 发布

阅读量239

点赞数

分类专栏： html jquery 实例

本文链接：https://blog.youkuaiyun.com/qq_21653855/article/details/103357700

版权

html 同时被 3 个专栏收录

6 篇文章

订阅专栏

jquery

4 篇文章

订阅专栏

实例

4 篇文章

订阅专栏

本文介绍了如何创建网站常用的Tab选项卡切换效果，通过代码预览详细展示了其实现过程，包括HTML结构、CSS样式以及JavaScript交互逻辑，帮助开发者理解并应用到自己的项目中。

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

效果预览：

代码预览：

<!DOCTYPE html>
<html>
<head>
	<title>tab选项卡切换</title>
	<meta charset="utf-8">
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	
	<style type="text/css">
	*{
		padding:0;
		margin:0;
	}
	a{
		text-decoration: none;
	}
	#tabs{
		position: relative;
		width: 65px;
		height: 40px;/*防止鼠标移出隐藏盒子*/
		margin:30px auto;
		border:1px solid red;
	}
	.tabs_a{
		position: absolute;
		border:1px solid #cecece;
		border-radius: 4px;
		left: -86px;
		top: 30px;
		width: 240px;
		height: 150px;
		background-color: #fbfafa;
		display: none;/*隐藏盒子*/
	}
	
	.tabs_top{
		position: absolute;
		width: 240px;
		height: 32px;
		border-bottom: 1px solid #e6e6e6;
		
	}
	.tabs_top span{
		display: block;
    	height: 31px;
    	line-height: 29px;
    	text-align: center;
	}
	.tabs_top span.up{
		width: 84px;
    	position: absolute;
    	left: 35px;
    	cursor: pointer;
	}
	.tabs_top span.history{
		position: absolute;
    	width: 84px;
    	left: 120px;
    	cursor: pointer;
	}
	.tabs_top span.span_style{
		color: #249ff1;
		border-bottom: 2px solid #249ff1;
	}
	.tabs_m{
		position: absolute;
    	width: 240px;
    	height: 90px;
   		top: 33px;
   		background-color:#fff;
	}
	.tabs_bottom{
		position: absolute;
		bottom: 3px;
		right: 8px;
	}
	.tabs_bottom a{
		color: black;
	}
	.tabs_bottom a:hover{
		text-decoration: underline;
		color: #249ff1;
	}
	.tabs_h{
		position: absolute;
		width: 240px;
		height: 214px;
		top: 33px;
		border-left:1px solid #cecece;
		border-right:1px solid #cecece;
		border-bottom:1px solid #cecece;
		background-color:#fbfafa;
		left: -1px;
		display: none;
	}
	.tabs_h span{
		position: absolute;
		display: block;
		width: 240px;
		height: 112px;
		text-align: center;
		line-height: 100px;
		color: #999999;
		font-size: 14px;
	}
	.tabs_h dl{
		position: absolute;
		left: 12px;
		bottom: 12px;
	}
	.tabs_h dl dt{
		font-size: 14px;
		color: #999999;
	}
	.tabs_h dl dd a{
		color: black;
		font-size: 12px;
	}
	.tabs_h dl dd a:hover{
		color: #249ff1;
		text-decoration: underline;
	}
	</style>
</head>
<body>
	请将鼠标放置到我看到的上面
	<div id="tabs">
		我看过的
		<div class="tabs_a">
			<!-- 头部 -->
			<div class="tabs_top">
				<span class="up span_style">影片追更</span>
				<span class="history" >观看记录</span>
			</div>
			<!-- 头部结束 -->
			<!-- 中间开始 -->
			<div class="tabs_m"></div>
			<!-- 中间结束 -->
			<!-- 底部 -->
			<div class="tabs_bottom">
				<a href="#">更新管理</a>
			</div>
			<!-- 底部结束 -->
			<!-- 观看记录 -->
			<div class="tabs_h">
				<span>您还没有观看记录</span>
				<dl>
					<dt>不妨看看：</dt>
					<dd><a href="1">《咱们结婚吧》女神嫁给国民老公</a></dd>
					<dd><a href="2">《我是特种兵之火凤凰》解放军版赤裸特</a></dd>
					<dd><a href="3">《千金归来》励志女神逆袭蜕变</a></dd>
				</dl>
			</div>
			<!-- 观看记录结束 -->
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			// 隐藏盒子显示效果
			$('#tabs').hover(function(){
				$('.tabs_a').show();
			},function(){
				$('.tabs_a').hide();
			})
			// 隐藏盒子内的tab切换效果
			$('.tabs_top span').mouseover(function(){
				$('.tabs_top span').removeClass('span_style');
				$(this).addClass('span_style');
			})

			//隐藏盒子内tab切换响应效果
			$('.history').mouseover(function(){
				$('.tabs_h').show();
			})
			$('.up').mouseover(function(){
				$('.tabs_h').hide();
				$('tabs_m tabs_bottom').show();
			})
		})
	</script>
</body>
</html>