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

代码如下

<!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. iOS逆向之TheOS

    TheOS 被设计为一个在基于 Unix 平台 (Mac OS X.IOS…) 和大多数 的Linux 平台下开发 iOS 程序的集成开发环境.说是集成开发环境,其实就是给我们准备好了一些代码模板.预 ...

  2. cant found Microsoft.VSSDK.BuildTools.15.0.26201

    如果在vs扩展开发中出现 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 Failed to load 'C:\程序\EncodingNormalior\packages\Microsoft. ...

  3. AndroidStudio环境安装与配置

    前言 大家好,给大家带来AndroidStudio环境安装与配置的概述,希望你们喜欢 AndroidStudio IDE下载 我们选择用Android Studio开发Android的App,Andr ...

  4. react在router中传递数据的2种方法

    概述 不传递数据叫什么单页面应用,渲染模块还需要http请求算什么单页面应用. 本文总结了react-router4中使用BrowserRouter时传递数据的两种方法,供以后开发参考,相信对其他人也 ...

  5. 分布式控制系统Git学习

    git : n. 饭桶,无用的人 github : n. 社交编程及代码托管网站 hub: n. 中心:毂:木片 Git是一个分布式版本控制软件,最初由林纳斯·托瓦兹(Linus Torvalds)创 ...

  6. 目标检测的图像特征提取之HOG特征

    HOG特征: 方向梯度直方图(Histogram of Oriented Gradient, HOG)特征是一种在计算机视觉和图像处理中用来进行物体检测的特征描述子.它通过计算和统计图像局部区域的梯度 ...

  7. 可变码率（英语：Variable bitrate，简称VBR）介绍

    可变码率(英语:Variable bitrate,简称VBR)这是一个用来形容通信服务质量(QoS for Quality of Service)的术语.和该词相对应的词是固定码率或固定比特率,英文c ...

  8. Linux排序不准确的问题，用以下两行代码解决

    export LC_ALL=C                                                                                      ...

  9. 理解极大似然估计(MLE)

    极大似然估计学习时总会觉得有点不可思议,为什么可以这么做,什么情况才可以用极大似然估计.本文旨在通俗理解MLE(Maximum Likelihood Estimate). 一.极大似然估计的思想与举例 ...

  10. c time类型详解

    linux下存储时间常见的有两种存储方式,一个是从1970年01月01日 0:00:00到现在经过了多少秒,一个是用一个结构来分别存储年月日时分秒的.time_t 这种类型就是用来存储从1970年到现 ...