最终效果图(鼠标无操作会自动切换选项卡):

 <!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. PHP 解析 ElasticSearch 的 json 方法,有關遍歷所有 json 元素

    以下是eleasticsearch返回的json資料:{"took" : 12,"timed_out" : false,"_shards" ...

  2. HttpHelper类

    using System;using System.Collections.Generic;using System.Text;using System.Net;using System.IO;usi ...

  3. Mysql-windows下修改密码

    忘记密码修改(以下各种方法视情况而使用,本人测试,有些都是案情况才可行,但都是有设置成功过) 注:修改密码成功后一定要记得刷新下权限(否则将导致不能使用当前用户连接) mysql>FLUSH P ...

  4. TODO: 图片加载框架ImageLoader的实现

    1, 使用三级缓存策略 2, 使用builder模式设置ImagLoager的config

  5. C#把datetime类型的日期转化成年月日或其他格式方法总结

    日期格式:yyyyMMdd HH:mm:ss(注意此字符串的字母大小写很严格) yyyy:代表年份MM:  代表月份dd:  代表天HH:  代表小时(24小时制)mm:  代表分钟ss:  代表秒D ...

  6. HTTP/2.0与HTTP/1.1协议区别

    超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是互联网上应用最为广泛的一种网络协议.设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法.通 ...

  7. ASP.net mvc Code First 更新数据库

    code first 数据库迁移步骤如下: 第一步:Add-Migration DataBase_Init 1. Install-Package EntityFramework.zh-Hans –Ve ...

  8. Leetcode Bulb Switcher

    There are n bulbs that are initially off. You first turn on all the bulbs. Then, you turn off every ...

  9. 【BZOJ-1507】Editor 块状链表

    1507: [NOI2003]Editor Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 3397  Solved: 1360[Submit][Stat ...

  10. bzoj2959: 长跑

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...