Jquery制作简单实用切换页tab的方法_jqueryweui tab切换-优快云博客

本文介绍了一个使用HTML、CSS和jQuery实现的手风琴菜单Tab切换效果，通过简单的代码展示了如何创建一个交互式的Tab菜单，当鼠标悬停在不同的Tab上时，可以平滑地显示和隐藏对应的内容。

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

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<style>
        *{box-sizing:border-box;}
		#nav{height:40px;}
		#nav a{display:block;height:40px;line-height:40px; width:100px; font-size:18px;text-align:center;float:left;background-color:#86cad7; border-bottom: 4px solid #fff; cursor:pointer;color: #fff;margin-right: 4px;}
		#nav a.on{background-color: #fad2cc; border-bottom-color: #fad2cc}
		#contentBox{width:308px;height:180px;}
		#contentBox .box{text-align:center;line-height:180px;font-size:24px;font-weight:blod;display:none;background-color: #fad2cc;color: #fff;}
		#contentBox .box.active{display:block;}
    </style>
</head>
<body>
	<div class="tab">
		<div id="nav">
		 <a class="on">tab1</a>
		 <a>tab2</a>
		 <a>tab3</a>
		</div>
		<div id="contentBox">
		 <div class="box active">第一部分</div>
		 <div class="box">第二部分</div>
		 <div class="box">第三部分</div>
		</div>
	</div>

	<script>

		$(function(){
		    $("#nav a").hover(function(){
		       var index = $(this).index();
		       $(this).addClass("on").siblings().removeClass("on");
		       $("#contentBox .box").eq(index).show().siblings().hide();
		     });
		  });  

	</script>
</body>
</html>