本关任务:用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
结构是相匹配的,
<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>