<!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. Linux课程---13、linux中任务计划介绍（任务计划分类）

    Linux课程---13.linux中任务计划介绍(任务计划分类) 一.总结 一句话总结: 1.一次性任务计划:at 2.周期性任务计划:crontab 1.linux中如何添加一次性任务计划? at ...

  2. System.Clollections.IEnumerable.cs

    ylbtech-System.Clollections.IEnumerable.cs 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicK ...

  3. windows 映射samba Linux服务器，输入正确的账号密码却提示“ 指定的网络密码不正确

    重启Linux samba服务也没用,重启Linux和windows系统也没用,急!!! 最佳答案 linux中要添加对应的系统用户和samba用户useradd titiansmbpasswd -a ...

  4. hibernate annotation 之 注解声明

    @Entity 将一个 POJO 类注解成一个实体 bean ( 持久化 POJO 类 ) @Table 为实体 bean 映射指定具体的表,如果该注解没有被声明,系统将使用默认值 ( 即实体 bea ...

  5. Object 和Throwable

    Object java.lang.Object 所有类的超类 Object里面有的方法所有的类都有 Object方法: String toString() 返回对象的字符串表现形式  类名 + @ + ...

  6. 窥探C语言程序的编译、链接与.h文件

    概述 C语言程序从源文件经过编译.链接生成可执行文件.那么编译与链接分别做了什么? 开发中为什么使用.h编写函数的声明?接下来使用案例说清楚为什么这样编写代码. C语言程序的编译和链接 C语言程序从源 ...

  7. 2019-8-31-dotnet-特性-DynamicallyInvokable-是用来做什么的

    title author date CreateTime categories dotnet 特性 DynamicallyInvokable 是用来做什么的 lindexi 2019-08-31 16 ...

  8. 爆表！猜猜这个大会的IQ总值有多高？

    “人人可及的未来,同样存在于「日拱一卒」的琐碎生活当中,那也是技术对生活最为直观的改变和演进.” “以通神明之德,以类万物之情”,这句来自<易经>的话,放到现今也合宜. 人类掌控事物发展的 ...

  9. 如何在 Apache Flink 中使用 Python API？

    本文根据 Apache Flink 系列直播课程整理而成,由 Apache Flink PMC,阿里巴巴高级技术专家 孙金城 分享.重点为大家介绍 Flink Python API 的现状及未来规划, ...

  10. 0821NOIP模拟测试赛后总结

    60分rank20.挂.完. 赛时状态 不是很好.老眼混花看错无数题目信息. 倒不是很困.尽管昨天晚上为了某个该死的s-h-s-j活动报告忙到了今天,但我不得不说车上的睡眠还是挺好的. 照例通读三道题 ...