简单tab选项卡切换代码教程

最新推荐文章于 2024-05-29 18:02:20 发布

仰望星空的包子

最新推荐文章于 2024-05-29 18:02:20 发布

阅读量2.2k

点赞数 1

分类专栏： jQuery初学者实例文章标签： tab选项卡切换

本文链接：https://blog.csdn.net/sinat_21206105/article/details/52231415

版权

这篇教程介绍如何使用HTML、CSS和jQuery创建一个简单的选项卡切换效果。通过设置CSS样式和jQuery事件监听，实现在鼠标悬停时切换显示不同内容的选项卡。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/reset.css">
	<script src="js/jquery.min.js"></script>
	<style>
	.tab{width:80%;margin:100px auto;}
	.top{overflow: hidden;}
		.top li{float: left; width: 10%; cursor: pointer;}
	}
	}
	</style>
</head>
<body>
	<div class="tab">
		<div class="top" id="top">
			<ul>
				<li>我是选项卡1</li>
				<li>我是选项卡2</li>
				<li>我是选项卡3</li>
				<li>我是选项卡4</li>
			</ul>
		</div>
		<div class="con" id="con">
			<div >hahahha1</div>
			<div  style="display:none;">hahahha2</div>
			<div  style="display:none;">hahahha3</div