简单的选项卡制作（原生JS）
<!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）的更多相关文章
- 原生JS实现简易转盘抽奖
我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- JS入门学习，写一个简单的选项卡
/* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById(''); 一定要多输,熟悉后o u什么的字母别搞 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 原生js实现tab选项卡
1.html部分 <body> <div id="tab"> <div class="tab_menu& ...
- 使用原生js与jQuery分别实现一个简单的tab页签
tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 一个简单用原生js实现的小游戏----FlappyBird
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...
随机推荐
- 修改web项目的启动页
修改web项目的启动页
- mac idea解决快捷键的问题
取消mac的快捷键 设置->键盘->快捷键 我这里取消的有:聚焦->显示聚焦搜索 应用快捷键->显示帮助菜单. 类似eclipse的自动提示错误的解决方案(quick fix ...
- node-webkit笔记
两个月前给一个运营站点做了个封皮,今天再做竟然忘了怎么搞了...为之文以志. 流程参考: http://www.cnblogs.com/2050/p/3543011.html 相关命令: copy / ...
- Spring IOC基础回顾 — 组件扫描和装配
目录 注解形式配置应用IOC 1. 组件自动扫描 2. 组件依赖:为bean添加注解,实现自动注入 3. Spring IOC应用小结 注解形式配置应用IOC 在类定义.方法定义.成员变量定义前使用, ...
- openSUSE 安装compass,mkmf.rb can't find,checking for ffi.h...extconf.rb failed
安装compass时,提示 Fetching: sass-.gem (%) Successfully installed sass- Fetching: ffi-.gem (%) Building n ...
- zookeeper结构和命令
1.1. zookeeper特性 1.Zookeeper:一个leader,多个follower组成的集群 2.全局数据一致:每个server保存一份相同的数据副本,client无论连接到哪个serv ...
- videojs实现双击视频全屏播放、播放器全屏时视频未全屏
https://blog.csdn.net/staritstarit/article/details/78451963 暂停时只能使用左下角的暂停按钮,点击视频时不再响应 使用width和height ...
- System.Web.Mvc.ViewEngineResult.cs
ylbtech-System.Web.Mvc.ViewEngineResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, P ...
- struts2的default.properties详解
Struts 2框架有两个核心配置文件:struts.xml和struts.properties 其中struts.xml文件主要负责管理应用中的Action映射,以及该Action包含的Result ...
- Ajax之json返回结果是集合的处理
Jquery实现ajax: $.ajax({ type //数据的提交方式:get和post url //数据的提交路径 async //是否支持 ...