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

代码如下

<!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. Python之旅Day1 数据类型初识（数字|字符串|列表|数据运算） 编码 表达式（if...else|for|while）

    初识PYTHON Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum(吉多·范罗苏姆)于 ...

  2. two sum --无脑法

    public class Solution { /* * @param numbers: An array of Integer * @param target: target = numbers[i ...

  3. 2019-4-25 html学习笔记

    一.概念 文本   用于储存和记录文字信息的载体 html  超文本标记语言(本质就是给文本增加语义 如<h1></h1>就是给文字添加一级标题的语义) 注:互联网三大基石 有 ...

  4. Android开发工程师文集-1 小时学会SQLite

    前言 大家好,给大家带来Android开发工程师文集-1 小时学会SQLite的概述,希望你们喜欢 内容 什么是Sqlite: 效率高,开源,小型,程序驱动,支持事务操作,无数据类型,可嵌入的关系型数 ...

  5. C++随机数引擎

    C++的随机数引擎有以下几个要点需要注意:  1.随机数发生器使用同一种子会生成相同序列的随机数序列 2.为了让程序每次运行都会生成不同的随机结果,我们可以使用 time(0) 产生一个随机数种子 3 ...

  6. C# Winform同时启动多个窗体类

    首先创建一个类,存放将要同时显示的窗体 using System; using System.Collections.Generic; using System.Linq; using System. ...

  7. Django--Ajax 提交

    一 什么是Ajax AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传 ...

  8. [java初探09]__关于java的包装类

    前言 在Java语言的学习过程中,我们逐渐的理解了Java面向对象的思想,与类和对象的应用.但是在基本数据类型的使用上,我们无法将其定义为一个对象,通过使用对象的方法来使用它们,但是Java语言的思想 ...

  9. HTTP请求代码整理

    HTTP请求代码整理 类别 代码 注释 1xx – 信息提示 100 继续 101 切换协议 2xx - 成功 200 确定.客户端请求已成功 201 已创建 202 已接受 203 非权威性信息 2 ...

  10. 从零开始学 Web 之 jQuery（四）元素的创建添加与删除，自定义属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...