初探JavaScript魅力(四)

选项卡

<title>无标题文档</title>
<style>
#div1 .active{background:#FF0;}
#div1 div{width:200px; height:200px; background:#666; border:1px solid #999;
         display:none;}
</style>
<script>
window.onload=function (){
    var oDiv=document.getElementById(‘div1‘);
    var aBtn=oDiv.getElementsByTagName(‘input‘);
    var aDiv=oDiv.getElementsByTagName(‘div‘);

    for(var i=0;i<aBtn.length;i++){
        aBtn[i].index=i;
        aBtn[i].onclick=function (){
            for(var 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>
<div id="div1">
<input class="active" type="button" value="教育"/>
<input type="button" value="培训"/>
<input type="button" value="招生"/>
<input type="button" value="出国"/>
   <div style="display:block;">1111</div>
   <div>2222</div>
   <div>3333</div>
   <div>4444</div>
</div>
</body>

时间: 2024-10-01 04:50:19

初探JavaScript魅力(四)的相关文章

01 - 初探JavaScript魅力

网页特效原理 用JavaScript修改样式 编写JS的流程 布局:HTML+CSS 属性:确定要修改哪些属性 事件:确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页面元素的样式 鼠标移入移出效果 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:

初探JavaScript魅力(五)

JS简易日历    innerHTML <title>无标题文档</title> <script> var neirong=['一','二','三','四','五','六','七','八','九','十','十一','十二',]; window.onload=function(){ var tab=document.getElementById('tab'); var ul=tab.getElementsByTagName('ul')[0]; var li=ul.get

初探JavaScript魅力(二)

行为,样式,结构三者分离(javascript, css, html),不要在行间加行为,样式 样式优先级:*<标签<class<ID<行间 style与className,如果先给了style行间样式,再给className不会有效果 <title>无标题文档</title> <style> #div1{width:200px;height:200px;border:1px solid #000;} .box{background:#F00;}

初探JavaScript魅力(三)

复选框的全选.反选和不选 <title>无标题文档</title> <style> body{background:#666;} </style> <script> window.onload=function (){ var oBtn1=document.getElementById('btn1'); var oBtn2=document.getElementById('btn2'); var oBtn3=document.getElement

初探JavaScript(四)——JS另类的作用域和声明提前

前言:最近恰逢毕业季,千千万万的学生党开始步入社会,告别象牙塔似的学校生活.往往在人生的各个拐点的时候,情感丰富,感触颇深,各种对过去的美好的总结,对未来的展望.与此同时,也让诸多的老“园”工看完这些小年轻的文章后感触良多,不禁也要写上几笔,所以就出来了很多类似“毕业两年小记”.“毕业五年有感”…… 可能就是某篇博文的一句话,某碗心灵鸡汤就拨动了你心里的那根尘封已久的弦,让你情不自禁的点了个赞,还忍不住的要在下面评论区留下自己此刻心潮澎湃的印记. 我今天不是来送鸡汤的,鸡汤虽好,可不要贪杯哦.

L2-初探JavaScript魅力(1)

getElementById 在JavaScript中,不得不说的是查找元素,然后再进行对其操作.getElementById(Id)是我们第一个js兼容问题,也是常用的方法.在火狐浏览器下直接使用ID是会存在问题的,要解决这个问题,就需要引入document.getElementById(Id).document.getElementById在任何浏览器下均可使用. 案例:网页换肤 html <!DOCTYPE html><html lang="en"><

初探JavaScript(二)——JS如何动态操控HTML

除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次接触JS,没有必要花费过多时间去钻死胡同,先混个脸熟,以后再来拜访也未尝不可嘛.就这样,踉踉跄跄.囫囵吞枣似的已经过五关斩六将,到达第十一章. 书中有几个章节并没有从语法.技术等层面介绍JavaScript,而是站在一个全局的角度,立足编程原则和习惯道破了我们该如何看待和使用这门语言,主要有以下几点: Jav

初探JavaScript(一)——也谈元素节点、属性节点、文本节点

Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本<Javascript Dom编程艺术>,开始慢慢走近JS,与它套近乎,今天是第三天了,从目前来看,比较好相处.就此动笔,是一个回忆复习的过程,权当是自己的一份读书笔记. JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,已经被广泛用于Web应用开发,常用来为网

javascript第四章总结

变量: javascript变量可以用来保存两种类型的值:基本类型和引用类型. 基本类型包括:Undefined,Null,Boolean,Number(用于所有的数值包括整数和浮点型) 和String. 这两者的特点是: 1.基本类型值在内存中占用固定大小的空间,一次被保存到栈的内存中: 2.从一个变量向里一个变量复制基本类型的值,会创建这个值的副本: 3.引用类型的值是对象,保存在堆得内存中: 4.包含引用类型的值得变量的实际上并不包含对象本身,而是一个指向该对象的指针: 5.从一个变量向另