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

---

任务描述

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

效果图如下：

相关知识

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

层次选择器

3. 第一个p标签下的span
4. 第一个p标签下的第二个span
7. i标签
8. 第二个p标签下的span

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

• 第一步：获取到类container：$(".container")

• 第二步：获取到container下第一个p标签：$(".container p:first")

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

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

show()和hide()

1. 错误提醒

2. 展示的内容

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

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

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

类的添加和删除

2.  
3. .active{ background: orange;}
4. .btn{}

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

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

编程要求

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

• 当点击上面的tab选项卡时，下面会显示对应的内容； 添加的类为active;

• tab切换静态页面已经写好，初始化已经完成，只需完成切换的功能；

• 注： 提供的代码不允许修改，只允许填充begin至end中间的代码

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

效果图如下：

---

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

	
	
	


    

    	

    		
全部实训
    		
实训路径
    		
在线课堂
    		
讨论区
    	
    	

    		
我是全部实训的内容
    		
我是实训路径的内容
    		
我是在线课堂的内容
    		
我是讨论区的内容