jquery实现tab栏切换

最新推荐文章于 2025-06-19 12:40:23 发布

学习代表未来

最新推荐文章于 2025-06-19 12:40:23 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery tab栏切换

本文链接：https://blog.youkuaiyun.com/weixin_39907729/article/details/81512930

jquery 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一种使用jQuery库来实现网页中Tab选项卡切换效果的方法。通过结合CSS样式和jQuery事件处理，可以创建响应式的选项卡，当用户鼠标悬停在不同的选项上时，能够动态显示和隐藏相应的面板内容。

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

1.在<head>里面引入jquery.js

<script src="jquery.js"></script>

2.css如下

<style type="text/css">
	* {
	    margin: 0;
	    padding: 0;
	}
	ul {
	    list-style: none;
	}
	.wrapper {
	    width: 1000px;
	    height: 475px;
	    margin: 0 auto;
	    margin-top: 100px;
	}
	
	.tab {
	    border: 1px solid #ddd;
	    border-bottom: 0;
	    height: 36px;
	    width: 320px;
	}
	
	.tab li {
	    position: relative;
	    float: left;
	    width: 80px;
	    height: 34px;
	    line-height: 34px;
	    text-align: center;
	    cursor: pointer;
	    border-top: 4px solid #fff;
	}
	
	.tab span {
	    position: absolute;
	    right: 0;
	    top: 10px;
	    background: #ddd;
	    width: 1px;
	    height: 14px;
	    overflow: hidden;
	}
	
	.products {
	    width: 1002px;
	    border: 1px solid #ddd;
	    height: 476px;
	}
	
	.products .main {
	    float: left;
	    display: none;
	}
	
	.products .main.selected {
	    display: block;
	}
	
	.tab li.active {
	    border-color: red;
	    border-bottom: 0;
	}

</style>

3.dom元素如下

<div class="wrapper">
	<ul class="tab">
		<li class="tab-item active">国际大牌<span>◆</span></li>
		<li class="tab-item">国妆名牌<span>◆</span></li>
		<li class="tab-item">清洁用品<span>◆</span></li>
		<li class="tab-item">男士精品</li>
	</ul>
	<div class="products">
		<div class="main selected">
		    <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
		</div>
		<div class="main">
		    <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
		</div>
		<div class="main">
		    <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
		</div>
		<div class="main">
		    <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
		</div>
	</div>
</div>

4.实现步骤

<script>
	$(function() {
		
		$(".tab>li").mouseenter(function() {
			
			//获取当前鼠标进入的li标签的索引
			var index = $(this).index();
			
			$(this).addClass("active").siblings("li").removeClass("active");
			
			//让对应索引的盒子显示 类名控制是否显示
			$(".products>div:eq(" + index + ")").addClass("selected").siblings("div").removeClass("selected");
		});
	});
</script>