排他思想小练习

    点击 某个按钮,让某个按钮对应的 ul 显示,其他的ul 都隐藏

            1 -找到所有的按钮 ,并循环

            2 -给按钮添加点击事件

            3 -点击的时候 获取的对应的按钮  获取按钮对应的下标  

            4 - 所有的都变为黑   点击的按钮颜色变为红色  

            5 - 其他的所有ul 都隐藏 按钮对应ul显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><div><button style=" color: black; ">电影票</button><button style="color: red;">飞度</button><button style="color: blue;">致梦想</button><button style="color: orange;">海涛</button></div><div><ul><li>111</li></ul><ul><li>222</li></ul><ul><li>333</li></ul><ul><li>444</li></ul></div></div><script>let btns = document.querySelectorAll('button') //按钮let oUls = document.querySelectorAll('ul')  //所有ulfor(let i=0;i<btns.length;i++){btns[i].onclick=function(){for(let j=0;j<btns.length;j++){//把所有按钮颜色变成黑色btns[j].style.color='black'//把所有的ul隐藏oUls[j].style.display='none'}this.style.color='red'oUls[i].style.display='block'}}</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/176719.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STC89C52+HX711完成电子秤设计

一、项目背景 电子秤是一种通过传感器测量物体质量的设备&#xff0c;被广泛应用于商业和工业领域。传统的机械秤已经逐渐被电子秤取代&#xff0c;因为电子秤具有更高的精度、更方便的使用和更多的功能。 本项目利用STC89C52单片机和HX711模块完成电子秤设计&#xff0c;具有…

Axure9基本操作

产品经理零基础入门&#xff08;四&#xff09;Axure 原型图教程&#xff0c;2小时学会_哔哩哔哩_bilibili Axure 9 从入门到精通全集&#xff0c;自学必备_哔哩哔哩_bilibili 1. ① 页面对应页面个数&#xff0c;概要对应每个页面的具体内容 ② 文件类型 ③ 备用间隔改为5分…

没有设计经验的新手如何制作一本电子画册?

移动信息时代&#xff0c;电子画册逐渐取代纸质画册&#xff0c;它无需印刷&#xff0c;环保节能&#xff0c;也无需随身携带&#xff0c;通过手机/平板/电脑等设备即可随时在线浏览阅读&#xff0c;十分方便。那没有设计经验的新手如何制作一本这样随身携带方便的电子画册呢&a…

Android WebView专题

WebView 专题 第一个WebView程序&#xff1a;加载远程网址 Layout添加WebView组件&#xff1b; <WebViewandroid:id"id/webView_first"android:layout_width"match_parent"android:layout_height"match_parent"/>初始化组件&#xff0c;加…

理工ubuntu20.04电脑配置记录

8188gu无线网卡配置 首先下载github上的文件&#xff0c;进入文件夹 安装make命令 1. 查看usb无线网卡 sudo lsusb|grep 8188 2. 环境准备 sudo apt-get install git make build-essential git dkms linux-headers-$(uname -r) 3. 编译安装 git clone https://github.com…

揭秘拍卖竞价源码的前沿技术:加密、智能合约与更多

在数字时代的今天&#xff0c;拍卖竞价源码成为了炙手可热的话题。作为该领域的专家&#xff0c;我将带您深入了解这一前沿技术的奥秘。本文将揭示拍卖竞价源码的工作原理、加密技术的应用、智能合约的作用以及其他相关技术。 2. 拍卖竞价源码的工作原理 拍卖竞价源码是一种用…

搭建项目环境,集成ts和jest

前言 开新坑。 斥巨资购入大崔哥的 mini-vue 课程&#xff0c;为了改变自己东一榔头西一棒槌的学习状态&#xff0c;也是因为深刻思考了自己身无长物浑浑噩噩这么多年只会敲代码&#xff0c;别无出路&#xff0c;也只能提升自己继续走技术这条路&#xff0c;那提高技术绕不过…

CTFhub-RCE-远程包含

给咱一个phpinfo那么必然有他的道理 PHP的配置选项allow_url_include为ON的话&#xff0c;则include/require函数可以加载远程文件&#xff0c;这种漏洞被称为"远程文件包含漏洞(Remote File Inclusion RFI)"。 allow_url_fopen On 是否允许打开远程文件 allow_u…

ESP32网络开发实例-将数据保存到InfluxDB时序数据库

将数据保存到InfluxDB时序数据库 文章目录 将数据保存到InfluxDB时序数据库1、InfluxDB介绍与安装3、软件准备4、硬件准备5、代码实现6、InfluxDB数据可视化在本文中,将介绍 InfluxDB 以及如何将其与 ESP32 开发板一起使用。 我们将向展示如何创建数据库桶并将 ESP32 数据发送…

V10chrony服务配置

Chrony简介 Chrony是一个开源自由的网络时间协议 NTP 的客户端和服务器软软件。它能让计算机保持系统时钟与时钟服务器&#xff08;NTP&#xff09;同步&#xff0c;因此让你的计算机保持精确的时间&#xff0c;Chrony也可以作为服务端软件为其他计算机提供时间同步服务。 Ch…

【Java 进阶篇】JQuery 案例:优雅的隔行换色

在前端的设计中&#xff0c;页面的美观性是至关重要的。而其中一个简单而实用的设计技巧就是隔行换色。通过巧妙地使用 JQuery&#xff0c;我们可以轻松地实现这一效果&#xff0c;为网页增添一份优雅。本篇博客将详细解析 JQuery 隔行换色的实现原理和应用场景&#xff0c;让我…

算法通关村第八关-白银挑战二叉树的深度和高度问题

大家好我是苏麟 , 今天说说几道二叉树深度和高度相关的题目 . LeetCode给我们造了一堆的题目&#xff0c;研究一下104、110和111三个题&#xff0c;这三个颗看起来挺像的&#xff0c;都是关于深度、高度的。 最大深度问题 描述 : 二叉树的 最大深度 是指从根节点到最远叶子…