<!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. （转）Android开发把项目打包成apk

    转:http://blog.csdn.net/luoyin22/article/details/7862742 做完一个Android项目之后,如何才能把项目发布到Internet上供别人使用呢?我们 ...

  2. 修改sql server表字段的字符串

    网站标题被注入黑链接,使用sql脚本update修改字段内的字符串截取UPDATE [qds0460132_db].[dbo].[Blood_News]   SET [Blood_Name] = SU ...

  3. JAVA 设计的七大原则

    一.开闭原则 开闭原则(Open-Closed Principle, OCP)是指一个软件实体如类.模块和函数应该对 扩展开放,对修改关闭. 所谓的开闭,也正是对扩展和修改两个行为的一个原则.强调 的 ...

  4. iOS扩展Extension之Today

    1.简介 扩展(Extension)是iOS 8中引入的一个新特性.扩展让app之间的数据交互成为可能.在iOS 8系统之前,每一个app在物理上都是彼此独立的,app之间不能互访彼此的私有数据.而在 ...

  5. POJ-2253-Frogger-/Floyd-Warshall/

    Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fiona Frog who is sit ...

  6. java8 新特性学习笔记

    Java8新特性 学习笔记 1主要内容 Lambda 表达式 函数式接口 方法引用与构造器引用 Stream API 接口中的默认方法与静态方法 新时间日期 API 其他新特性 2 简洁 速度更快 修 ...

  7. python pywin32学习笔记

    参考博客链接 https://blog.csdn.net/polyhedronx/article/details/81988948 参考博客链接 https://www.cnblogs.com/zha ...

  8. POJ 1873 /// 状压+凸包

    题目大意: 国王有一片森林,巫师需要从所有树中选出一些做成围栏把其他树围起来, 每棵树都有其对应的价值 v 和能作为围栏的长度 l 要求最小价值,若存在多种最小价值的方案则选择余下长度更少的 树木较少 ...

  9. 一个mdl相关的问题

    感觉挺有意义的,细节问题 http://www.kernelmode.info/forum/viewtopic.php?f=14&t=4318这个人代码到底犯了什么错误 I want to p ...

  10. 用在 AMD64 上 aria2_1.33.1-1_amd64.deb 的下载页面

    用在 AMD64 上 aria2_1.33.1-1_amd64.deb 的下载页面 如果您正在运行 Ubuntu,请尽量使用像 aptitude 或者 synaptic 一样的软件包管理器,代替人工手 ...