<!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. 02-Nov-2017 07:11:56.475 信息 [http-nio-8080-exec-10] com.mchange.v2.c3p0.impl.AbstractPoolBackedDataSource. Initializing c3p0 pool...

    报错: 02-Nov-2017 07:11:56.475 信息 [http-nio-8080-exec-10] com.mchange.v2.c3p0.impl.AbstractPoolBackedD ...

  2. http://edu.manew.com/ ,蛮牛教育（很少免费），主要是unty3D和大数据方向。适合扫盲

    http://edu.manew.com/ ,蛮牛教育(很少免费),主要是unty3D和大数据方向.

  3. iOS开发NSMutableArray数组越界处理

    #import "NSArray+CrashArray.h" #import <objc/runtime.h> @implementation NSObject (Un ...

  4. HDU - 2222,HDU - 2896,HDU - 3065,ZOJ - 3430 AC自动机求文本串和模式串信息(模板题)

    最近正在学AC自动机,按照惯例需要刷一套kuangbin的AC自动机专题巩固 在网上看过很多模板,感觉kuangbin大神的模板最为简洁,于是就选择了用kuangbin大神的模板. AC自动机其实就是 ...

  5. 记因为电脑名更改而导致sql server一直连接失败

    安装的是sql server2016.原先一直用的好好的,直到有一天觉得电脑名称,嗯要改下.改完后,嗯,就忘了. 然后打开sql server,连接失败.一开始以为是sql server配置管理器中的 ...

  6. js 删除数组中指定值

    var arr = ['1','2'];delete('1'); function delete(i){ var index = arr.indexOf(i); arr.splice(index, 1 ...

  7. SecureCRT 64位 破解版和安装，以及解决乱码问题

    链接:https://pan.baidu.com/s/1q1DEmohK7ISNJ7UbJkN3jw 提取码:yea3 复制这段内容后打开百度网盘手机App,操作更方便哦 securecrt 破解版是 ...

  8. 解决element 分页组件，搜索过后current-page 绑定的数据变了，但是页面当前页码并没有变的问题

    前言上一篇写前台解决分页问题的时候没有这个问题,但是在实际项目后台中有遇到过,所以在这里专门说一下,如果参考前台分页出现这种问题了,也可以使用这种方法!bug:vue和element实现的后台分页,当 ...

  9. [JZOJ4759] 【雅礼联考GDOI2017模拟9.4】石子游戏

    题目 描述 题目大意 在一棵树上,每个节点都有些石子. 每次将mmm颗石子往上移,移到根节点就不能移了. 双方轮流操作,问先手声还是后手胜. 有三种操作: 1. 询问以某个节点为根的答案. 2. 改变 ...

  10. LUOGU P1505 [国家集训队]旅游 (树链剖分+线段树)

    传送门 解题思路 快被调死的码农题,,,其实就是一个边权下放到点权的线段树+树剖. #include<iostream> #include<cstdio> #include&l ...