<!doctype html>

<html>

<head>

<meta charset="utf-8">

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

<style>

    div{

        width: 100px;

        height: 100px;

        background-color: aqua;

        color: white;

        display: none;

    }

</style>

</head>

<body>

<a href="javascript:btn(1)">视频</a>

<a href="javascript:btn(2)">音乐</a>

<a href="javascript:btn(3)">图片</a>

<div>视频</div>

<div>音乐</div>

<div>图片</div>

</body>

</html>

<script>

    var odiv = document.getElementsByTagName("div");

    function btn(index){

        for(var i = 0 ;i<odiv.length;i++){

            odiv[i].style.display = "none";

        }

        odiv[index-1].style.display = "block";

    }

</script>

简单的选项卡制作（原生JS）的更多相关文章

  1. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  2. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  3. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  4. JS入门学习，写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

  5. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  6. 原生js实现tab选项卡

    1.html部分 <body>        <div id="tab">            <div class="tab_menu& ...

  7. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

  8. 原生js实现tab选项卡里内嵌图片滚动特效代码

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

  9. 一个简单用原生js实现的小游戏----FlappyBird

    这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...

随机推荐

  1. ~/.bashrc的常用alias设置,30 个方便的 Bash shell 别名

    centos6.5/centos7系统中,alias定义在/etc/bashrc,分别写在/etc/profile.d/*.sh中,可以在此目录添加my.sh,或者~/.bashrc,或者~/.bas ...

  2. Http学习(二)

    使用首部字段是为了给浏览器和服务器提供报文主体大小.所使用语言.认证信息等 4种首部字段类型 通用首部字段 请求首部字段 响应首部字段 实体首部字段 详细说明: HTTP首部字段类型 通用首部字段: ...

  3. play framework 从环境搭建到简单运行

    download 官网:https://www.playframework.com/ 将zip下载至本地,进行unzip. 环境变量 检测是否安装成功:解压成功后进入解压的目录,运行 play 终端显 ...

  4. node环境下安装vue-cli

    一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v  (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...

  5. Spring - 框架入门

    认识 Spring 框架 Spring 框架是 Java 应用最广的框架,它的成功来源于理念,而不是技术本身,它的理念包括 IoC (Inversion of Control,控制反转) 和 AOP( ...

  6. Java学习之程序运行机制

    Java的运行机制是:先编译,后解释. 典型的编译型编程语言是:C和C++. eg:用c语言编写的*.c文件编译生成*.h文件,通过链接将*.h文件链接成*.exe文件,然后就可以运行,编译型的高级语 ...

  7. 1.1python基础_基础

    1_编码 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串. 当然你也可以为源码文件指定不同的编码: # -*- coding: UTF-8 -*- ...

  8. TIB、TEB 信息

    https://en.wikipedia.org/wiki/Win32_Thread_Information_Block 这是重点 Position Length Windows Versions D ...

  9. java_JDK8中新增的时间API

    java.time 包含值对象的基础包 java.time.chrono 提供对不同的日历系统的访问 java.time.format 格式化和解析时间的日期 java.time.temporal 包 ...

  10. linux流量监控iftop命令安装详解

    iftop跟nload差不多,也是捕获网卡流量的命令,nload的安装见之前发布的教程:http://www.cnblogs.com/catlee/p/5703541.html 开始安装.本文以cen ...