js通过dom遍历标签选项卡
// 通过老师讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list>div{
display: none;
}
</style>
</head>
<body>
<div class="btn">
<button>娱乐</button>
<button>灰太狼</button>
<button>红太狼</button>
</div>
<div class="list">
<div>
<div>娱乐1</div>
<div>娱乐2</div>
<div>娱乐3</div>
</div>
<div>
<div>灰太狼1</div>
<div>灰太狼2</div>
<div>灰太狼3</div>
</div>
<div>
<div>红太狼1</div>
<div>红太狼2</div>
<div>红太狼3</div>
</div>
</div>
// 引入js文件
<script src="../js/01.js"></script>
</body>
</html>
//js文件
var _btn = document.querySelectorAll(".btn>button")
// 拿到多有button按钮
console.log(_btn)
// 遍历button按钮
_btn.forEach(function (item,index){
item.onclick = function (){
// 看是否点击事件生效
// console.log('11')
// 在此之前我们要遍历按钮将按钮的样式都设置成black，transparent
_btn.forEach(function (item1){
item1.style.color = 'black'
item1.style.backgroundColor = 'transparent'
})
// 点击的时候让点击的按钮变成红色字体，背景色天蓝色
item.style.color = 'red'
item.style.backgroundColor = 'skyblue'
_list = document.querySelectorAll('.list>div')
_list.forEach(function (item2){
// console.log(item3)
// 变里div数组，设置为display：none
item2.style.display = 'none'
// 点击的时候点中按钮的索引对应的list下的div的索引一致
_list[index].style.display = 'block'
})
}
})
js通过dom遍历标签选项卡相关推荐
- php html标签自定义属性,浅谈JS读取DOM对象(标签)的自定义属性
DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: var test = document.getElementById( ...
- 5月25日-js操作DOM遍历子节点
一.遍历节点遍历子节点children();//获取节点的所有直接子类 遍历同辈节点next();prev();siblings();//所有同辈元素*find();从后代元素中查找匹配的filter ...
- JS DOM获取标签/元素style样式
JS DOM获取标签/元素style样式 文章目录 JS DOM获取标签/元素style样式 .style getComputedStyle() .style 只能获取行内样式,不能获取style标签 ...
- JS DOM之DOM遍历
JS DOM之DOM遍历 1.什么是DOM遍历? 2.查找父元素 3.查找子元素 4.查找兄弟元素 1.什么是DOM遍历? DOM遍历,可以简单地理解为"查找元素".举个例子,如果 ...
- day03_js学习笔记_03_js的事件、js的BOM、js的DOM
day03_js学习笔记_03_js的事件.js的BOM.js的DOM ================================================================ ...
- JS+BOM+DOM汇总
文章目录 前言:JavaScript的发展史 第一章:BOM 1.1.概念 1.2.组成:window.Navigator.Screen. History.Location 1.3.方法 第二章:DO ...
- web前端-JS（DOM、BOM）
web前端-JS(DOM.BOM) 1. DOM- 操作元素 1.1 获取元素 1.2 事件基础 1.3 操作元素 1.3.1 改变元素的内容 1.3.2 常见元素的属性操作 1.3.3 表单元素的属 ...
- JS获取DOM元素的八种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
- 前端之JavaScript：JS之DOM对象一
js之DOM对象一 一.什么是HTML DOM HTML Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 ...
最新文章
- VUE保存页面的数据，VUE页面显示就执行某个函数，VUE页面隐藏就执行某个函数
- hibernate 全面学习【lazy策略 】
- 获赞23w+在B站一夜爆火，大写的牛B！程序员进阶网盘资源（有链接和提取码）...
- 上线。我都惊呆了。。。
- 读书笔记----javascript函数编程
- 在网络中同时使用kfold和使用Dropout（基于Iris数据集）
- 乱花渐欲迷人眼－杜绝设计的视噪
- python 网页编程_通过Python编程检索网页
- Android 实现选中与非选中样式效果
- 无盘服务器 机械盘,Win7启动速度研究，同样的PC配置，机械盘、固态盘、无盘网络启动速度为何不同？...
- jquery显示隐藏切换_jQuery显示，隐藏，切换
- 11月19日 数据库连接 PDO
- Flutter 2.5正式版发布，带来重大更新
- 年薪60w的程序员与年薪6w的极品程序员，差距怎么这么大呢？
- 【零基础微信小程序】基于百度大脑人像分割的证件照换底色小程序实战开发
- MySQL数据库 1067号错误的解决办法
- zookeeper核心原理
- Android自定义壁纸预览界面,Android自定义动态壁纸开发(时钟)
- zookeeper安装配置的时候zoo.cfg配置信息分成了两个文件zoo.cfg.dynamic
- 又有大佬加入! 「3点钟区块链」之大年初五:不眠夜共襄区块链应用落地 ! (附96小时实录)