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

代码如下

<!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 10 应用内跳转到系统设置

    在iOS开发中,有时会有跳转系统设置界面的需求,例如提示用户打开蓝牙或者WIFI,提醒用户打开推送或者位置权限等.在iOS6之后,第三方应用需要跳转系统设置界面,需要在URL type中添加一个pre ...

  2. Redis集群环境使用的是redis4.0.x的版本，在用java客户端jedisCluster启动集群做数据处理时报java.lang.NumberFormatException: For input string: "7003@17003"问题解决

    java.lang.NumberFormatException: For input string: "7003@17003" at java.lang.NumberFormatE ...

  3. 在Markdown中写注释

    概述 下面是我整理的在Markdown中写注释的几种方法,供自己开发时参考,相信对其他人也有用. html标签 既然Markdown内嵌html语法,那么就可以用可以用隐藏的html标签. 注意:需要 ...

  4. LinkedList 的源码分析

    LinkedList是基于双向链表数据结构来存储数据的,以下是对LinkedList  的 属性,构造器 ,add(E e),remove(index),get(Index),set(inde,e)进 ...

  5. pdf.js显示合同签名问题

    需求 pdf页面显示在ios11以下的环境,合同的签名印章或签字会显示不出 解决方案(初步处理参考下文引用,这里是后续具体做法) 现在通过使用pdf.js插件,参考下文,引入自己的代码 我把gener ...

  6. 用Nginx搭建IIS集群实现负载均衡

    长话短说,我们用Nginx来搭建一个简单的集群,实现Web应用的负载均衡,架构图如下: 两台Web服务器,一台静态资源服务器,因为是演示,我们以网站形式部署在本机IIS中 一台Nginx代理服务器,安 ...

  7. 用O(1)的时间复杂度删除单链表中的某个节点

    给定链表的头指针和一个结点指针,在O(1)时间删除该结点.链表结点的定义如下: struct ListNode { int m_nKey; ListNode* m_pNext; }; 函数的声明如下: ...

  8. Jquery 动态追加控件并获取值

    先展示通过动态添加控件的结果: 实现步骤: 1.引用js文件 <script src="Script/jquery-1.5.1.min.js" type="text ...

  9. python lxml库生成xml文件-节点命名空间问题

    lxml库,处理xml很强大,官方文档:https://lxml.de/tutorial.html#namespaces 例如: 我们要生成如下格式的报文: <ttt:jesson xmlns: ...

  10. 1.Django自学课堂

    1.django manage.py startproject project_name   -->创建工程 2.python manage.py startapp app_name   --& ...