<!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. 牛客多校第五场 B generator 1 矩阵快速幂

    题意: 给定$x_0,x_1,a,b,n,mod, x_i=a*x_{i-1}+b*x_{i-2}$ ,求$x_n % mod$ n最大有1e6位 题解: 矩阵快速幂. 巨大的n并不是障碍,写一个十进 ...

  2. 开发笔记-19/10/28 -SpringBoot @Value 获取配置参数

    1. 在application.properties 定义参数 role.taskEvent :参数名称 4:值 ## ---------------------任务角色--------------- ...

  3. Bubble Cup 12 - Finals Online Mirror, unrated, Div. 1

    Bubble Cup 12 - Finals Online Mirror, unrated, Div. 1 C. Jumping Transformers 我会状压 DP! 用 \(dp[x][y][ ...

  4. springcloud ribbon Finchley 版本，自定义算法

    引用上一个项目,在原有的基础上进行更改,添加springcloud的内荣. eureka-server 和上一个springcloud eureka的一样,没有改动. 添加cloud-api pack ...

  5. Python遇到的第一个问题

    1.运行如下代码: 输入成绩80之后报错: 2.问题分析:字符串跟整型不能比 3.查看score的类型 print(type(score)), 由此看出score是string类型的,因为input接 ...

  6. 3、变量+运算符+Scanner

    1.变量 1>开辟内存空间 int num ; 2>赋值 num = 10; 3>使用 num 1*long 类型的特殊 long num = 12L 2*float类型特殊 flo ...

  7. LUOGU P3382 【模板】三分法 (三分)

    传送门 解题思路 三分,填坑.每次取l与r的中间值mid,然后向左移一点点,向右移一点点进行判断,判断时用秦九韶算法即可. #include<iostream> #include<c ...

  8. mysql联表查询，使用phpStudy自带的

    一.内联结.外联结.左联结.右联结的含义及区别在SQL标准中规划的(Join)联结大致分为下面四种:1.内联结:将两个表中存在联结关系的字段符合联结关系的那些记录形成记录集的联结.2.外联结:分为外左 ...

  9. 最棒的7种R语言数据可视化

    最棒的7种R语言数据可视化 随着数据量不断增加,抛开可视化技术讲故事是不可能的.数据可视化是一门将数字转化为有用知识的艺术. R语言编程提供一套建立可视化和展现数据的内置函数和库,让你学习这门艺术.在 ...

  10. 【转载】Fiddler抓包及模拟服务端

    此文章转载公众号‘云测学院'链接:https://mp.weixin.qq.com/s/qXmBDh980nBJ8IchbRGC3Q 及公众号gloryroadtrain 在HTTP接口的测试过程中, ...