JavaScript/jq之切换选项卡

标签: js  javascript  jquery

  • 实现:点击不同的按钮就会出现对应的内容
    在这里插入图片描述
  • 代码部分
  • html
<style>
       #div1 button{width: 100px; height: 30px;background-color: gray; color: white; font-size: 18px}
        #div1 .active{background-color: orange; color: blue}
        #div1 div{width: 340px; height: 300px; border: 1px solid black; display: none}
    </style>
</head>
<body>
    <div id = 'div1'>
	    <button class = 'active'>HTML5</button>
	    <button>Python</button>
	    <button>Java</button>
	    <div style = 'display: block'>HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然在技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性网站开发技术人员是必须要有所了解的</div>
	    <div>Python是一种计算机程序设计语言。是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的、大型项目的开发。</div>
	    <div>Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程</div>
    </div>
</body>

方案一:用js来实现

<script>
   window.onload = function(){
        var oDiv1 = document.getElementById("div1");
        var aBtns = oDiv1.getElementsByTagName("button");
        var aDivs = oDiv1.getElementsByTagName("div");


        //通过循环,去给每一个按钮,添加点击事件
        for(var i = 0; i < aBtns.length; i++){
            //获取div1下所有标签的下标
            aBtns[i].index = i;
            aBtns[i].onclick = function(){
                //取消所有按钮的样式
                for(var j = 0; j < aBtns.length; j++){
                    aBtns[j].className = '';
                    aDivs[j].style.display = 'none';
                }
                
                //当点击到下标为0的按钮时,就给该标签一个ClassName--active
                this.className = 'active';
                //通过按钮的下标找到对应的div显示
                //aDivs[this.index]里的this.index,指的是div1(oDiv1)里的div(aDivs)
                //当点击按钮1时就显示第一个div的内容
                aDivs[this.index].style.display = 'block';
            }
        }
    }
</script>

方案二:用JQ来实现

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
	$(function(){
	    //获取点击事件对象
	    $("#div1 button").click(function(){
	        //获取要显示或隐藏的对象
	        var divShow = $("#div1").children("div");
	        //判断当前对象是否被选中,如果没选中的话进入if循环
	        if(!$(this).hasClass('.active')){
	            //获取当前对象的索引
	            var index = $(this).index();
	            //当前对象添加选中样式并且其同胞移除选中样式;
	            $(this).addClass('active').siblings('button').removeClass('active');
	            //索引对应的div块显示
	            $(divShow[index]).show();
	            //索引对应的div块的同胞隐藏
	            $(divShow[index]).siblings("div").hide();
	        }
	    });
	});
</script>
版权声明:本文为weixin_45663697原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45663697/article/details/107517232

智能推荐

PAT乙级 | 1095 解码PAT准考证 (25分)(做题过程+注意事项+运行超时解决方法)

PAT 准考证号由 4 部分组成: 第 1 位是级别,即 T 代表顶级;A 代表甲级;B 代表乙级; 第 2~4 位是考场编号,范围从 101 到 999; 第 5~10 位是考试日期,格式为年、月、日顺次各占 2 位; 最后 11~13 位是考生编号,范围从 000 到 999。 现给定一系列考生的准考证号和他们的成绩,请你按照要求输出各种统计信息。 输入格式: 输入首先在一行中给出两个正整数 ...

谈谈Java异常

0 概述 对于java工程师来说,是经常和异常打交道的,本文主要来谈一谈java中的异常。 1 异常类的继承关系 从下图(说明:图中只是列出部分异常类)可以看出: 异常的基类为Throwable,主要分为两个分支,即Error体系和Exception体系。 Exception下面分为RuntimeException和非RuntimeException(如IOException) 2 几种异常的区别...

通过设立FatFS隐藏分区,实现系统文件和用户文件的隔离

嘛。。这是一个关于个人使用FatFS文件系统的 一点小的经验。 我知道大家都会百度和谷歌,关于文件系统有什么用,文件系统怎么移植上自己的平台,看看资料也就懂了,在这里不再详述( 打字太慢一分钟50-60字懒得写)。本系列默认已经可以将设备模拟成u盘,并且已经通过修改diskio.c,可以实现ff.c中的各项功能( 不能实现的自行面壁)。FatFS项目官网 http://elm-chan.org/f...

Mysql之锁与事务知识要点小结

Mysql之锁与事务 平时的业务中,顶多也就是写写简单的sql,连事务都用的少,对锁这一块的了解就更加欠缺了,之前一个大神分享了下mysql的事务隔离级别,感觉挺有意思的,正好发现一个很棒的博文,然后也收集了一些相关知识,正好来学习下,mysql中锁与事务的神秘面纱,主要内容包括 共享锁和排它锁的区别以及适合范围 mysql的表锁和行锁的区别 怎么判断一个sql是否执行了锁,执行的是表锁还是行锁 ...

响应式图片二 通过srcset实现

具体方法如下: srcset=”图片地址+空格+尺寸描述符,图片地址+空格+尺寸描述符,图片地址+空格+尺寸描述符….” 浏览器会当前浏览的环境进行感知,这个感知包括网速、界面分辨率、DPR(屏幕像素比)等等,然后在图片中选择一个进行加载。 实际上,在相同DPR下,浏览器会根据屏幕的分辨率加载图片,但是加载了大的图片后再缩小还是会使用大的图片。综合考虑的算法非...

猜你喜欢

Training_model(2)

已经清洗处理了两个数据文件: application_{train|test}.csv :客户详细信息 bureau.csv : 客户历史信用报告 下面对这两个数据中的特征进行合并,然后Light Gradient Boosting Machine训练模型,之前只用客户数据的预测评分结果是0.734,这次加入了客户信用报告信息 load data 新增加了客户历史信用记录 Build Model ...

微信小程序 页面跳转(传参跟不传参)

跳转页面传参 1.首先我的目录结构是这样的,并在 cinema.wxml 定义了一个点击事件 bindtap=‘indetai’ 2.然后在 cinema.js 的data里面定义了一个 score,并实现了 indetai 方法 3.在 detai.js 的 data 里面也定义一个 score ,再在 onLoad 函数里面接收传递过来的值 4.在页面上显示得到的值 这...

JavaSE 10(二维数组)

前言:      在经历了血雨腥风的地狱模式后本以为迎来了学习的平静,但二维数组又打破了这难得的平静!!!二维数组在java编程中同样也是很重要的知识点,因此在这里我将整理二维数组的知识点与重点,以及习题,便于自己的复习与巩固。 二维数组的声明与创建: 下面是声明二维数组的语法: 数据类型[][]数组名 : 数据类型数组名[][]; (允许这种方式 ,但并不推荐使用它...

深入理解 Linux 内存机制!| 技术头条

作者 | 阿文 责编 | 郭芮 作为一名Linux 系统运维工程,在日常管理 Linux 的时候,我们经常发现系统的空闲内存差不多总是被用完了。   通常,我们可以通过 top 和 free 查看内存使用情况:     执行 free:     为了更人性化地显示,我们可以加上 -h 选项:       可以看到我们的...