目标效果：点击不同按钮显示不同内容

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        input{background-color: white}

        .click{background-color: darkcyan}

        div{width: 200px;height: 200px;background-color: antiquewhite;display: none}

    </style>

    <script type="text/javascript">

        window.onload=function ()

        {

         var ainput = document.getElementsByTagName('input');//获取所有input标签

         var adiv = document.getElementsByTagName('div');//获取所有div标签

         var i = 0

         for (i=0;i<ainput.length;i++)

         {

             ainput[i].index = i

             ainput[i].onclick=function ()//循环点击input标签

             {

                for(i=0;i<ainput.length;i++)//循环清除input标签和div标签样式某些属性

                {

                    ainput[i].className='';

                    adiv[i].style.display='none';

                }

                // alert('点击'+this.index+'个按钮');

                 adiv[this.index].style.display='block';//当前input所对应的显示div

                 this.className='click';

             }

         }

        }

    </script>

</head>

<body>

   <input  type="button" value="1">

   <input type="button" value="2">

    <div>000</div>

    <div>111</div>

</body>

</html>

js之选项卡（tag标签）的更多相关文章

  1. 一行JS代码，解决DedeCMS TAG标签错误输入符号问题

    在维护内容的时候, Tag标签输入经常要来回切换输入法,  只能通过','号分隔.  中文用户, 输入法出来的经常是全角的, 经常弄错, 增加了检查的工作量,  现在只要一句JS代码, 就自动替换所有 ...

  2. js实现选项卡

    通过JavaScript实现如上选项卡切换的效果. 实现思路: 一.HTML页面布局 选项卡标题使用ul..li 选项卡内容使用div 二.CSS样式制作 整个选项卡的样式设置 选项卡标题的样式设置 ...

  3. 1前端案例-tag标签+随机位置

    tag标签随机位置+js数组随机+js添加一段html代码段 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  4. DedeCms织梦发布文章时输入Tag标签逗号自动变成英文标点的方法

    把TAG标签的间隔号由空格改为英文的逗号,这样使得经常原创文章的站长朋友非常不方便,因为我们输入汉字时总是喜欢使用全角的逗号,那么有没有办法使用 js脚本把输入的中文逗号变成英文逗号呢?当然是可以的! ...

  5. 使用原生js实现选项卡功能实例教程

    选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...

  6. Vue + Element-ui实现后台管理系统(3)---面包屑 + Tag标签切换功能

    面包屑 + Tag标签切换功能 有关后台管理系统之前写过两遍博客,看这篇之前最好先看下这两篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system 1.V ...

  7. js 面向对象 动态添加标签

    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. 开发高效的Tag标签系统数据库设计

    需求背景 目前主流的博客系统.CMS都会有一个TAG标签系统,不仅可以让内容链接的结构化增强,而且可以让文章根据Tag来区分.相比传统老式的Keyword模式,这种Tag模式可以单独的设计一个Map的 ...

  9. 针对CMS中的tag标签理解

    针对CMS的tag标签有以下解释: 什么tag标签? TAG标签是一种由自定义的一种标签,要比分类更加的准确,可以概括文章主要内容的关键词. 运用TAG标签,可以使网站的文章更容易被搜索引擎检索到.百 ...

  10. php有效的过滤html标签,js代码,css样式标签

    过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...

随机推荐

  1. 有关C++模板inline的高性能在lambda与function的体现

    前两天在群里跟人讨论到写库时对于lambda和function的取舍,跑了写测试查了些资料后基本得出结论: 如果没有自由变量的情况下,一般不要用function. 如果有自由变量的话,C++中的lam ...

  2. 【UWP】手动实现 WebAuthenticationBroker

    在 UWP 中,如果要进行 OAuth 授权,那很大概率是会用上 WebAuthenticationBroker 这个类的,例如微博授权这种. 在一般情况下来说,WebAuthenticationBr ...

  3. Apache Phoenix Flume集成 -- JsonEventSerializer改进

    背景 数据从kafka ingest到Phoenix.数据格式采取Json.数据链路: api -> kafka -> Flume -> Phoenix 官方JsonEventSer ...

  4. Apktool下载与安装 windows环境

    Apktool 下载与安装 百度网盘地址:https://pan.baidu.com/s/1slQBMOl  (apktool 2.2.4版本) 更多版本可以从官网https://ibotpeache ...

  5. workman的学习总结

    我们知道php主要是用来做web应用的,而且平时使用的都是都是和其他的web服务器来结合使用,比如和apache,nginx和apache的时候,是作为apache的一个动态模块来加载,和nginx的 ...

  6. 选项卡--原生js

    比较基础的一个特效,毕业设计要做一些记录,就把这些都记下来吧,万一用到的时候忘了呢 function changeTab() { let navs = document.getElementsByTa ...

  7. 兼容多数浏览器的js添加收藏夹脚本

    浏览器不断发展,js的很多脚本需要跟进才能适应,目前多数代码对新版本浏览器(IE11, Firefox 27)无法适用,特关注跟进. 推荐代码1 适用浏览器:IE11(windows 8.1), Fi ...

  8. D3.js的一些基础部分 (v3版本)

    最近公司有需求要做一些可视化的功能.之前一直都是用Echarts做的,但是Echarts难以满足我们的需求,经过多方请教,查找发现D3可以满足我们的需求.第一次接触到D3,发现这些图标的可交互性非常丰 ...

  9. Go语言标准库之JSON编解码

    Go语言标准库之JSON编解码 基本的类型 Go语言中的数据类型和JSON的数据类型的关系 bool -> JSON boolean float64 -> JSON numbers str ...

  10. Django项目中使用celery做异步任务

    异步任务介绍 在写项目过程中经常会遇到一些耗时的任务, 比如:发送邮件.发送短信等等~.这些操作如果都同步执行耗时长对用户体验不友好,在这种情况下就可以把任务放在后台异步执行 celery就是用于处理 ...