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

青旅半醒 2022-04-11 02:50 312阅读 0赞

--------------------

任务描述

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

效果图如下：

![195313][]

相关知识

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

层次选择器

1.  `<div class="container">`
2.  `<p>`
3.  `<span>第一个p标签下的span</span>`
4.  `<span>第一个p标签下的第二个span</span>`
5.  `</p>`
6.  `<p>`
7.  `<i>i标签</i>`
8.  `<span>第二个p标签下的span</span>`
9.  `</p>`
10. `</div>`

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

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

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

show()和hide()

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

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

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

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

类的添加和删除

1.  `<div id="box"></div>`
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`中间的代码

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

效果图如下：

![195313][]

--------------------

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

<!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>

[195313]: https://educoder.trustie.net/attachments/download/195313