Javascript简单选项卡

上周末为止看完了html+css的视频教程，这周开始Javascript，看的妙味课堂的教程，多做练习，同时强化html和css。

思路：

选项卡，简单来说有两部分组成，上面的按钮和下面相应要显示的块。点击按钮，显示相应的块。

通过设置类名active来修改按钮的激活状态

通过块的display属性来调整显示和隐藏

Javascript中的知识点;

1.getElementsByTagName 通过标签名来获取元素

2.var i=0; for(i=0;i<5;i++){ } for循环

3.对象名.length 表示对象长度

4.this 表示当前对象

Javascript思路：

通过for循环对每个按钮设置onclick事件，当被点击时：

1.首先所有按钮的类名设为空即清除激活状态，所有的div块display设为none

2.给被点击的按钮设置激活状态，相应的div块display设为block

源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
input{background:white;}
.active{background:yellow;}
div{width:200px;height:200px; display:none; border:blue solid 1px; background:#ccc;}
</style>
<script type="text/javascript">window.οnlοad=function(){var aBtn=document.getElementsByTagName('input');var aDiv=document.getElementsByTagName('div');var i=0;for(i=0;i<aBtn.length;i++){aBtn[i].index=i;aBtn[i].οnclick=function(){   for(i=0;i<aBtn.length;i++){aBtn[i].className='';aDiv[i].style.display='none';}this.className='active';aDiv[this.index].style.display='block';};}};
</script></head><body>
<input class="active" type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<div style="display:block">111111111111111111</div>
<div>222222222222222222</div>
<div>333333333333333333</div></body>
</html>

效果如下：

Javascript简单选项卡_妙味课堂相关推荐

李炎恢教程/妙味课堂javaScript/jQuery/js/Ajax全套视频
使用JavaScript编写一个Base.js基础库,然后通过这个基础库+自行开发的插件,最终完成一个精简型博客主题的前端功能. 这是一个问答系统精简版,高仿了一些知乎网站的部分功能.通过这个小型项目 ...
妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
妙味课堂ajax教程,妙味课堂JS高级专题篇视频资料分享
<妙味课堂JS高级专题篇视频教程>将向大家详细介绍javascript,javascript是一种直译式脚本语言,也是一种广泛用于客户端Web开发的脚本语言.目前,被数百万计的网页用来改进 ...
妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
妙味课堂cctv移动端项目
2019独角兽企业重金招聘Python工程师标准>>> 项目介绍妙味课堂仿cctv项目移动端准备工作 viewport 这里根据psd,宽度为640,所以使用了下面的meta & ...
倒计时妙味课堂_jQuery实现倒计时（倒计时年月日可自己输入）
$(function(){ var tYear = ""; //输入的年份 var tMonth = ""; //输入的月份 var tDate = " ...
妙味课堂 - 前端初窥 -
Ps技术 - 切图测量测量:F8.信息面板切图(抠图) command + c 复制 command + n 新建同等大小纸张 command + d 粘贴 command + s 保存 css ...
妙味课堂WEB前端开发全套教程无加密版
妙味课堂WEB前端开发全套视频教程无加密版下载地址:百度网盘

Javascript简单选项卡_妙味课堂

Javascript简单选项卡_妙味课堂相关推荐

最新文章

热门文章