基于jQuery实现tab选项卡【js实现页签切换】

jQuery Tab 切换功能

最新推荐文章于 2025-09-24 14:36:58 发布

原创最新推荐文章于 2025-09-24 14:36:58 发布 · 6.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js实现页签切换

JavaScript基础专栏收录该内容

19 篇文章

订阅专栏

本文介绍使用jQuery实现Tab切换效果的方法，包括层次选择器、show和hide方法及类操作，适用于网页动态内容切换需求。

任务描述

本关任务：用jquery实现一个tab切换的功能。

效果图如下：

相关知识

为了完成本关任务，你需要掌握：1.层次选择器，2.方法show和hide， 3.操作css类的方法。

层次选择器

<div class="container">
<p>
<span>第一个p标签下的span</span>
<span>第一个p标签下的第二个span</span>
</p>
<p>
<i>i标签</i>
<span>第二个p标签下的span</span>
</p>
</div>

如何获取到上面第一个p标签下所有的span标签？这里主要用层次选择器获取一下：

第一步：获取到类container：$(".container")
第二步：获取到container下第一个p标签：$(".container p:first")
第三步：获取到第一个p标签下所有的span标签：$(".container p:first span")

从上面可以看出来，层次选择器和Dom结构是相匹配的，

show()和hide()

<p class="toggle">错误提醒</p>
<p>展示的内容</p>

对于类toggle，有错误时需要出现，解决了错误需要隐藏。这个功能怎么实现呢？这里用show()和hide()：

出现：$(".toggle").show()
隐藏：$(".toggle").hide()

show()的原理相当于css中的 display:block;
hide()的原理相当于css中的 display:none;

类的添加和删除

<div id="box"></div>
.active{ background: orange;}
.btn{}

给上面的div添加类active和btn，该如何实现呢？这里用addClass()方法：
$("#box").addClass("active btn");

现在要删除一个类btn，这里用removeClass()方法：
$("#box").removeClass("btn");

编程要求

jquery已经引入，在右侧编辑器补充begin至end间的代码，实现tab切换的功能。要求如下：

当点击上面的tab选项卡时，下面会显示对应的内容；添加的类为active;
tab切换静态页面已经写好，初始化已经完成，只需完成切换的功能；
注：提供的代码不允许修改，只允许填充begin至end中间的代码

注意：为了方便评测，这里统一用双引号 "" 来表示字符串，切记。

效果图如下：

开始你的任务吧，祝你成功！

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="container">
    	<ul class="head">
    		<li>全部实训</li>
    		<li>实训路径</li>
    		<li>在线课堂</li>
    		<li>讨论区</li>
    	</ul>
    	<div class="content">
    		<div>我是全部实训的内容</div>
    		<div>我是实训路径的内容</div>
    		<div>我是在线课堂的内容</div>
    		<div>我是讨论区的内容</div>
    	</div>
    </div>
    
    <script>
    
    $(function(){
    	 //tab的初始化
    	$(".head li").removeClass('active').eq(0).addClass('active');
    	$(".content div").hide().eq(0).show();
    	
    	
    	$(".head li").on('click', function(){
            // index是点击的li的索引
    		var index = $(this).index();
            
    		//-----------begin-----------
          $(".head li").removeClass('active').eq(index).addClass('active');
          $(".content div").hide().eq(index).show();
            //------------end------------  
    	})
            
    	
    })
    
        
    
    </script>
    
    <style>
    	.container{
    		width: 500px;
    		margin: 40px auto;
    	}
    	ul,li{
    	  list-style-type: none;
    	}
    	.container ul{
    		overflow: hidden;
    		background: #000;
    		color: #fff;
    	}
    	.container li{
    		width: 100px;
    		float: left;
    		text-align: center;
    		line-height: 60px;
    		font-size: 18px;
    		cursor: pointer;
    	}
    	.container li.active{
    		color: orange;
    	}
    	
    	.container .content{
    		width: 460px;
    		height: 200px;
    		padding: 20px;
    		background: #ccc;
    		font-size: 18px;
    	}
    </style>
</body>
</html>