|
|
第一阶段作品展示
同学，经过前几周的学习，相信你已经掌握了本课程的一些基础性知识，下面请你动手完成以下作品，并提交上来。
你需要提交的作品：
用jquery写一个tab选项卡效果，请将代码复制到word文档中，将运行的结果截图粘贴到word文档中，将word文档作为附件提交上来。
要求：
1. 点击tab切换不同的内容。
2. 当前选择的tab需要有背景色。
小试牛刀2019-05-05
同学，你好！学习了如何使用JQ使div自适应窗口的高度，学习图片轮换效果后，现在你来小试牛刀，检验一下自己的学习成果吧！看看你是否已将知识消化吸收。以下4个任务请你根据自己的能力等级任选1个，完成后运行一下，如果达成预定的效果，请将代码复制到word文档中，将运行的结果截图粘贴到word文档中，将word文档作为附件提交上来。你也可以完成多个任务，提交多个成果哦！看看谁的任务完成得最好哦！提交成果后，请一定记得到问答栏目老师的学习活动主题帖下回帖参与学习活动哈，无论是提交成果还是回帖都会计入你的平时成绩哦。
任务一：检验一下你是否学会了类选择器（基础）。
在代码编辑器中第50行填写相应代码。
$(".imooc")
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=utf-8" />
<title></title>
<style>
div {
width: 100px;
height: 90px;
float: left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
<script
src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<script type="text/javascript">
//通过原生方法处理
//样式是可以多选的，所以得到的是一个合集
//需要通过循环给合集中每一个元素修改样式
var divs = document.getElementsByClassName('aaron');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
</script>
<script type="text/javascript">
//通过jQuery直接传入class
//class选择器可以选择多个元素
|
|
发表于 2019-7-2 13:33:51
