初探js特效魅力05

接下来为大家介绍的选项卡的切换

<!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>js特效</title>
<!-- <link id="link1" rel="stylesheet" type="text/css" href="css1.css" />-->
<style>
#div1 .active{
 background:pink;
}
#div1 div{
  width:200px;
  height:200px;
  border:1px solid black;
  background:pink;
  display:none;
 }
</style>
<script>
 window.onload=function(){
  var div1=document.getElementById("div1");
  var oBtn=div1.getElementsByTagName("input");
  var oDiv=div1.getElementsByTagName("div");
  
  for(var i=0;i<oBtn.length;i++){
   oBtn[i].index=i;
   oBtn[i].onclick=function(){
    for(var i=0;i<oBtn.length;i++){
     oBtn[i].className=''; 
     oDiv[i].style.display='none';
    }
    this.className='active';
    oDiv[this.index].style.display="block";
   }
  }
 }
 </script>
</head>
<body>
<div id="div1">
 <input type="button" class='active' value="教育" id="btn1"/>
    <input type="button" value="培训" id="btn2"/>
    <input type="button" value="出国" id="btn3"/>
    <input type="button" value="其他" id="btn3"/>
    <div style="display:block">111</div>
    <div>222</div>
    <div>333</div>
    <div>4444</div>
 </div>  
</body>
</html>
未完待续，请继续收看初探js特效魅力06

<一>初探js特效魅力之选项卡05的更多相关文章

  1. <一>初探js特效魅力之全选不选反选04

    初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...

  2. JS的魅力

    一.初探JavaScript魅力 基本知识: JavaScript是什么 网页特效原理 -JavaScript就是修改样式 编写JS流程 - 布局:HTML + CSS - 属性:确定修改哪些属性 - ...

  3. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  4. 滚动变色的文字js特效

    Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...

  5. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

  6. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  7. 鼠标经过显示二级菜单的js特效

    本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  8. 又到圣诞节，让你的网页下起雪(js特效)

    又到圣诞节,让你的网页下起雪(js特效) 在4年多前,我写过一个特效,就是让你的网页下起雨,它的效果就是在你打开的网站,雨点下满你的屏幕,恩,大概效果如下图: 当然这个效果还有一些附带项,比如风速.风 ...

  9. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

随机推荐

  1. codevs 1994 排队 排列组合+高精度

    /* 数学题0.0 最后答案:A(n,n)*A(n+1,2)*A(n+3,m)+A(n,n)*C(m,1)*A(2,2)*C(n+1,1)*A(n+2,m-1); 简单解释一下 +之前的很显然 先排男 ...

  2. request.getAttribute( "result");和request.setAttribute("result",username);

    request.setAttribute("result",username);在request对象中加入名为result的属性并附值为username,因为request对象是可 ...

  3. CSS3 @font-face使用实例

    Windows10操作系统使用实例: 1.准备好对应格式的字体库 2.方正字体使用实例 <!DOCTYPE html> <html> <head> <meta ...

  4. OC - 21.CALayer核心要点及实例解析

    CALayer基础 CALayer是每一个UI控件的核心,一个UI控件之所以能显示可以说是CALayer的功劳 每一个UI控件默认都为自己创建一个CALayer对象,通过drawRect方法将内容绘制 ...

  5. ANSI escape code

    最近在做iOS上的SSH终端项目,主要是在手机上远程连接Unix系统,并进行一些简单的指令操作,类似于SecureCRT:今天想总结一下这个项目中遇到的新东西----ANSI escape code. ...

  6. maven在mac上的入门使用

    首先博主也是在入门学习,在学习maven时遇到了不少问题.查资料时发现网上maven的使用大多是win的,所以我打算写点maven在mac入门使用的笔记,希望可以帮助到跟我一样有困难的你们. 1.ht ...

  7. 【转】Hibernate和ibatis的比较

    1. 简介 Hibernate是当前最流行的O/R mapping框架.它出身于sf.net,现在已经成为Jboss的一部分了.iBATIS是另外一种优秀的O/R mapping框架,现已改名叫myB ...

  8. C#三种方式实现序列化(转)

    序列化和反序列化我们可能经常会听到,其实通俗一点的解释,序列化就是把一个对象保存到一个文件或数据库字段中去,反序列化就是在适当的时候把这个文件再转化成原来的对象使用. 序列化和反序列化最主要的作用有: ...

  9. Extjs中grid表格中去掉红三角

    在编辑Extjs的gridpanel的时候,数据有错误或是修改在每个单元格上都会出现红色的小三角,在每个列上面可以配置allowBlank: false来标识这个不可以为空 有的时候在保存数据时如果不 ...

  10. C# 中使用 OpenSSL 的公钥/私钥进行加密和解密

    在C#中进行RSA解密,需要用RSACryptoServiceProvider,但是不支持OpenSSL格式的公钥或者私钥. X509 公钥 -----BEGIN PUBLIC KEY----- MI ...