选择li标签点击这个标签时添加layui-nav-itemed属性如果这个属性存在则移除,点击其他li标签时移除上一个标签的layui-nav-itemed属性添加到当前点击的libiaoq
时间: 2024-03-16 20:42:33 浏览: 201
jQuery点击切换Tab标签选项卡代码
您可以通过以下代码实现:
```javascript
// 获取所有的 li 标签
var lis = document.querySelectorAll('ul.layui-nav li');
// 遍历所有 li 标签
for (var i = 0; i < lis.length; i++) {
// 给每个 li 标签添加点击事件
lis[i].addEventListener('click', function() {
// 判断当前 li 标签是否存在 layui-nav-itemed 属性
if (this.getAttribute('layui-nav-itemed')) {
// 存在,则移除该属性
this.removeAttribute('layui-nav-itemed');
} else {
// 不存在,则添加该属性
this.setAttribute('layui-nav-itemed', '');
// 移除其他 li 标签的 layui-nav-itemed 属性
for (var j = 0; j < lis.length; j++) {
if (lis[j] !== this) {
lis[j].removeAttribute('layui-nav-itemed');
}
}
}
});
}
```
这段代码将会为页面上所有的 `ul` 元素中的 `li` 标签添加点击事件。当点击某个 `li` 标签时,如果该标签已经存在 `layui-nav-itemed` 属性,则移除该属性;否则,添加该属性,并移除其他 `li` 标签的 `layui-nav-itemed` 属性。这样,每次只会有一个 `li` 标签被展开。
阅读全文