最终效果图（鼠标无操作会自动切换选项卡）：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="gb2312" />

 <title>无标题文档</title>

 <style>

 body, ul, li {

     font-family:"黑体";

     margin:0;

     padding:0;

 }

 ul, li {

     list-style:none;

 }

 .tab {

     width:408px;

     margin:200px auto auto auto;

 }

 .hide {

     display:none;

 }

 #tab_head {

     height:31px;

     border-top:2px solid #03F;

     border-bottom:1px solid #090;

 }

 #tab_head li {

     float:left;

     width:100px;

     height:30px;

     line-height:30px;

     margin:0 0px;

     text-align:center;

     border:1px solid #ccc;

     border-bottom:none;

     background:#f5f5f5;

     cursor:pointer

 }

 #tab_head .current {

     position:relative;

     height:31px;

     margin-bottom:-1px;

     background:#fff;

 }

 #tab_body {

     border:1px solid #ccc;

     border-top:none;

     padding:20px;

     height:150px;

     text-indent:2em;

 }

 </style>

 <script>

 window.onload = function(){

   var tab_head = document.getElementById("tab_head");

   var tab_head_li = tab_head.getElementsByTagName("li");

   var tab_body = document.getElementById("tab_body");

   var tab_body_div = tab_body.getElementsByTagName("div");

   var len = tab_head_li.length;

   var i=0;

   var timer = null;

   var num=0;

       //1.进行初始化设置，设置每个导航的onmouseover和onmouseout的事件

    for(i=0; i<len; i++){

         tab_head_li[i].index = i;

         tab_head_li[i].onmouseover = function(){

              clearInterval(timer);

              num = this.index;

              tab_bodychange();

         }

         tab_head_li[i].onmouseout = function(){ autoplay(); }

    }

    //辅助函数，将num当前置为显示

   function tab_bodychange(){

    for(i=0; i<len; i++){

     tab_head_li[i].className = '';

     tab_body_div[i].className = 'hide';

    }

    tab_head_li[num].className = 'current';

    tab_body_div[num].className = '';

   }

   //辅助函数，自动循环改变

   function autoplay(){

    timer = setInterval(function(){num=(++num)%len;tab_bodychange();},500);

   }

   autoplay();//2.进入自动循环

  }

 </script>

 </head>

 <body>

 <div class="tab">

   <ul id="tab_head">

     <li class="current">HOME</li>

     <li>VIDEO</li>

     <li>IMAGE</li>

     <li>MUSIC</li>

   </ul>

   <div id="tab_body">

     <div>HOME 标签</div>

     <div class="hide">VIDEO 标签</div>

     <div class="hide">IMAGE 标签</div>

     <div class="hide">MUSIC 标签</div>

   </div>

 </div>

 </body>

 </html>

HTML+JS+DOM【选项卡自动切换】的更多相关文章

  1. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  2. Tab选项卡 自动切换效果js实现

    try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  3. 原生js实现选项卡样式切换的几种方式。

    先分享一个不能实现的实例(因为es5没有块作用域) for(var i=0; i<list.length; i++ ) { list[i].onclick = function(){ tabch ...

  4. js实现左右自动滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js原生选项卡（自动播放无缝滚动轮播图）二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  6. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  7. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  8. 用js实现选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...

  9. js实现选项卡切换

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

随机推荐

  1. js对象学习

    1. 属性类型 数据属性 ①Configurable 表示能否通过delete删除属性,默认值true ②Enumerable 表示能否通过for-in循环访问属性,默认值true ③Writable ...

  2. android部分开发摘要

    Async 异步  不会阻塞当前线程sync  同步 数据库是应用软件|结构化数据存储  JDBC  SQL ellipsis 省略 content provider   URI thread--lo ...

  3. Swift基础--可选绑定和守护绑定

    Swift中的可选绑定和守护绑定 1.可选绑定 格式 // 通过url来创建request对象 if let tempUrl = url { // url为可选类型,当可选类型有值,才执行大括号里面的 ...

  4. Jenkins_多项目构建(一)：单独建立一个项目按顺序执行其它job

    有A,B,C三个Job,A为服务或web Job,B,C为A依赖的其它Job 单独建个Job,按B,C,A的顺序进行编译   1.安装插件:Multijob plugin   2.新建A,B,C三个J ...

  5. zabbix的使用

    1,zabbix运行流程 2功能特性 1数据收集 2灵活触发器 3高度可定制告警 4实时绘图功能 5web监控能力 6多种可视化展示 7历史数据存储 8配置容易 9API功能 10.......... ...

  6. Mybatis 自动生成代码

    准备条件: 将下面的文件放入同一目录下 操作步骤: 1/ 在 generatorConfig.xml 中配置相关的参数,与需要被自动生成的表 也可以 执行项目中的MybatisConfigAutoGe ...

  7. ElasticSearch快照备份及恢复

    工作步骤: 1:建立备份快照数据挂载点,即共享文件目录(Shared Filesystem): 2:建立快照仓储repository: 3:建立snapshot快照备份: 4:恢复snapshot快照 ...

  8. xml解析工具-jdom

    前言:近期接触SSH框架的时候,经常得配置一下xml文件:今天闲来没事就挖挖xml解析的原理供大伙儿分享.本文主要通过一个简单的例子解析一个xml文件.明白其中缘由之后,大家想定义自己的xml也绝非难 ...

  9. iOS音频

    随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制,还是对麦克风.摄像头的操 ...

  10. 硬盘分区时GPT和MBR的区别/选择

    最明显的区别是MBR最大支持2T的硬盘,而GPT则更大. 1.最先出现在Windows8中设置新磁盘,系统会询问你是想要使用MBR还是GPT分区,GPT是一种新的硬盘分区标准.GPT带来了很多新特性, ...