tab下拉显示
2024-10-20 05:52:19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
#warp{
width: 600px;
height: auto;
margin: 0 auto;
margin-top: 20px;
}
#warp .content p{
width: 300px;
height: 30px;
background-color: #000;
color: #fff;
line-height: 30px;
text-align: center;
}
#warp .content+ .content{
margin-top: 2px;
}
#warp .content ul{
display: none;
}
#warp .content ul.on{
display: block;
}
#warp .content li{
background-color: #ccc;
width: 300px;
text-align: center;
}
#warp .content li + li{
margin-top: 1px;
}
</style>
<body>
<div id="warp">
<div class="content">
<p>动物</p>
<ul>
<li>猴子</li>
<li>大象</li>
<li>狮子</li>
</ul>
</div>
<div class="content">
<p>山川</p>
<ul>
<li>长江</li>
<li>黄河</li>
<li>井水</li>
</ul>
</div>
<div class="content">
<p>美女</p>
<ul>
<li>貂蝉</li>
<li>西施</li>
<li>秀秀</li>
</ul>
</div>
</div>
<script>
let oP = document.getElementsByTagName("p"),
aUl = document.getElementsByTagName("ul"),
index;
console.log(oP.length);
for(var i=0;i<oP.length;i++){
oP[i].index = i;
oP[i].onclick = function(){
index = this.index;
aUl[index].className = aUl[index].className === ""? "on" : "";
console.log(i)
}
}
</script>
</body>
</html>
最新文章
- (分享)根据IP获取地理位置(百度API)
- 使用winpcap多线程抓包,以及简单的分析数据包
- Convert.ChangeType不能处理Nullable类型的解决办法
- Java 线程并发策略
- 转:nginx 从入门到精通的博文
- hadoop 2.6.0上安装sqoop-1.99.6-bin-hadoop200
- ZOJ3626(树形dp)
- Thrift学习记录
- vsftp之虚拟用户
- centos7下mysql半同步复制原理安装测试详解
- 深入理解JS中的变量及变量作用域
- ionic+微信js-sdk集成初步融合,在子路由页引入js操作dom节点
- javascript数组去重复
- Unity注意事项
- 我是怎么样和Linux结缘并通过红帽RHCE认证的
- html单元格导出excel图形环境问题
- Java Integer Cache
- Csharp:asp.net CheckBoxList databind
- codeforces 600C Make Palindrome
- makefile 与android.mk中加信息打印
热门文章
- 【bzoj1150】[CTSC2007]数据备份Backup
- exception log
- ionic2 在执行ionic serve后报 build dev failed: Cannot set property &#39;fileSystem&#39; of null
- sql 2005 win7 64 数据引擎
- Web框架 - 开源软件库 - 开源中国社区
- ModuleNotFoundError: No module named &#39;urlparse&#39;
- bzoj 1623: [Usaco2008 Open]Cow Cars 奶牛飞车【排序+贪心】
- 洛谷P4241 采摘毒瘤
- [App Store Connect帮助]四、添加 App 图标、App 预览和屏幕快照(6)设置 App 预览海报帧
- 二分搜索 POJ 1064 Cable master