选项卡插件2

最新推荐文章于 2024-09-02 11:46:47 发布

原创最新推荐文章于 2024-09-02 11:46:47 发布 · 627 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#选项卡

插件专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和jQuery实现的简易选项卡插件，通过鼠标悬停事件切换不同内容面板的显示与隐藏，实现了动态的选项卡效果。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			ul,
			ol {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			ul {
				width: 500px;
				height: 26px;
			}
			ul li {
				float: left;
				height: 26px;
				padding: 0 16px;
				cursor: pointer;
			}
			ol {
				width: 488px;
				padding: 6px;
				background: #abcdef;
			}
			.hide {
				display: none;
			}
			.show {
				display: block;
			}
			.normal {
				color: black;
				background: #ddd;
				border: 1px solid #abcdef;
				border-bottom: 0;
			}
			.hover {
				color: #fff;
				background: #abcdef;
				border: 1px solid #abcdef;
				border-bottom: 0;
			}
		</style>

	</head>

	<body>
		<div id="tab">
			<ul>
				<li>tab1</li>
				<li>tab2</li>
				<li>tab3</li>
			</ul>
			<ol>
				<li><img src="img/1.jpg" /></li>
				<li><img src="img/5.jpg" /></li>
				<li><img src="img/3.jpg" /></li>
			</ol>
		</div>

		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			$("ol>li:first").show().siblings().hide();
			$("ul>li:first").addClass("hover");
			
			$("ul>li").mouseenter(function(){
				$(this).addClass("hover").siblings().removeClass("hover");
				$("ol>li").eq($(this).index()).show().siblings().hide();
			})
		</script>

	</body>
	
</html>

还有另一种[选项卡插件]可参考(https://blog.youkuaiyun.com/yingayinga/article/details/84840121)