下拉菜单的实现classList.add() classList.remove() class属性的添加和删除
2024-09-03 23:25:47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: #f25022;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div style="height: 48px"></div>
<div style="width: 300px">
<div class="item">
<div class="header" onclick="ChangeMenu(this)">菜单1</div>
<div class="content">
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class="item">
<div class="header" onclick="ChangeMenu(this)">菜单2</div>
<div class="content hide">
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class="item">
<div class="header" onclick="ChangeMenu(this)">菜单3</div>
<div class="content hide">
<div>内容3</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div class="header" onclick="ChangeMenu(this)">菜单4</div>
<div class="content hide">
<div>内容4</div>
<div>内容4</div>
</div>
</div>
</div>
<script>
function ChangeMenu(ths){
current_head = ths;
var all_text =current_head.parentElement.parentElement;
children_text = all_text.children;
for(var i=0; i<children_text.length; i++){
current_text = children_text[i]; current_text.children[1].classList.add('hide')
} current_head.nextElementSibling.classList.remove('hide') }
</script>
</body>
</html>
最新文章
- RFID考试背诵
- SQL GROUP BY 中的TOP N
- 让你的linux操作系统更加安全【转】
- 内存分配函数malloc、realloc、calloc、_alloca
- WPF之Treeview控件简单用法
- wcf系列学习5天速成——第三天 分布性事务的使用 有时间再验证下 不同库的操作
- XPath与Xquery
- java学习笔记day05
- 如何重载浏览器 onload 事件后加载的资源文件
- 轻松搞定javascript原型链 _proto_
- BZOJ 1996: [Hnoi2010]chorus 合唱队(dp)
- 怎样改动、扩展并重写Magento代码
- 简单字符串匹配 Brute
- 利用PYTHON设计计算器功能
- C# -- 泛型的使用
- springboot源码之（内嵌tomcat）
- Linux下docker报错syntax error:unexpected protocol at end of statement
- ffmpeg的各种黑科技
- 使用Nginx搭建集群
- React对比Vue（06 路由的对比）