【HTML5基础】DOM操作 ╰半橙微兮° 2021-12-10 02:47 269阅读 0赞 本文笔记基于「千古壹号」的GitHub项目:https://github.com/qianguyihao/web ### 文章目录 ### * 1.自定义属性 * 2.鼠标点击时Tab栏切换 # 1.自定义属性 # * 在标签内添加属性,以**data**\-开头 <div class="box" title="盒子" data-my-name="hyo" data-content="我是一个div">div</div> var box = document.querySelector('.box');/* 获取符合条件的第一个元素。 */ console.log(box.dataset["myName"]); //打印结果:hyo,其中js没有-,故N大写 # 2.鼠标点击时Tab栏切换 # * 需求: 1.显示初始选中的内容 2.鼠标点击时Tab栏切换 * 思路: 1.初始状态: (function (key) \{\})(i),key表示当前显示的第几个,i是用户设置的 2.点击切换:排他思想 * 步骤: 1. html5: 导航栏:nav标签,存放超链接 内容:section标签,class=cont,均一样;id=导航栏中的data-cont值;存放ul列表, 2. js-初始状态: var navs = document.querySelectorAll('nav a');// 获取符合条件的所有元素 遍历navs的长度,若key=i,则给导航栏添加激活标签: navs[i].classList.add('active'); 显示该导航下的内容: var secId = navs[i].dataset['cont'];//将该导航自定义属性值赋给列表内容的id document.querySelector('#' + secId).style.display = 'block';// 默认都是none,但该id对应的显示 3.js-点击切换: 点击事件内排他,首先捕获: var currentNav = document.querySelector('.active'); var currentId = currentNav.dataset['cont']; 清除: currentNav.classList.remove('active'); document.querySelector('#' + currentId).style.display = 'none'; 显示: this.classList.add('active'); var myId = this.dataset['cont']; document.querySelector('#' + myId).style.display = 'block';
还没有评论,来说两句吧...