原生js之同级元素添加移除class

<div class="tp-bottom-content"><div class="tp-nav"><ul id="nav"><li class="active"><span>快速跟进</span></li><li ><span>跟进</span></li><li><span>联系人(1)</span></li><li><span>通话记录(1)</span></li><li><span>订单(1)</span></li><li><span>合同(1)</span></li></ul></div><div class="content-list"><div class="list-item">1</div><div class="list-item" style="display: none;" >2</div><div class="list-item" style="display: none;" >3</div><div class="list-item" style="display: none;" >4</div><div class="list-item" style="display: none;" >5</div><div class="list-item" style="display: none;" >6</div></div></div>

初次完成的js

var li = document.getElementById("nav").getElementsByTagName("li");var listItem = document.getElementsByClassName("list-item");var length = li.length;for (var i = 0; i < length; i++) {li[i].index = i;li[i].onclick = function() {li[this.index].setAttribute("class","active");for (var j = 0; j < length; j++) {li[j].className = "";listItem[j].style.display = "none";};listItem[this.index].style.display = "block";this.className = "active";}};

转载于:https://www.cnblogs.com/firstsight/p/8028742.html

原生js之同级元素添加移除class相关推荐

js原生给生成的html添加点击事件,原生js为动态元素添加监听事件
//已存在div //创建标签 function createpage(){ var span=document.createElement('span') span.innerHTML=" ...
js中怎么为同级元素添加点击事件
事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...
原生js——无法获取元素高度的的问题
原生js--无法获取元素高度的的问题今天遇到了xxx.style.width无法获取元素宽度的问题,原来一直没有注意到这个小细节: 1)如果width:150px:是写在 css 样式表(外链式)里 ...
原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
原生js firstChild 获取元素的第一个节点兼容问题（需求获取元素节点）
原生js firstChild 获取元素的第一个节点问题 firstChild 获取当前元素节点下的第一个子节点. 获取到的子节点可能是元素节点,但编程中更可能是注释节点或文本节点. 没有子节点则返回 ...
原生JS清空子元素+原生JS添加子元素
//获取父元素-清空子元素 let content = document.getElementsByClassName("table-page__text")[0]; //循环删除 ...
js中给元素添加类的方法
一.原生js中添加类的方法 1.为 <div> 元素添加一个类: document.getElementById("div").classList.add(" ...
原生js获取html元素属性,JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）...
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性二.设置元素的属性三.删除元素的属性一.获取元素的属性 1-原生JS 获取属性 .ge ...
js动态给元素添加属性
最终效果: 具体代码: <!DOCTYPE html> <html lang="zh"> <head><meta charset=&qu ...
class 原生js获取父元素_原生js获取class
//使用原生js时,通过class名称就可以得到相应的class名称标签组封装的函数 //定义一个函数getClass(oParent,aClass); function getClass(oPare ...

原生js之同级元素添加移除class

原生js之同级元素添加移除class相关推荐

最新文章

热门文章