原生JavaScript( 五 ) _生活百科

20.选项卡<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}.box {width: 600px;height: 400px;border: 1px solid red;margin: auto;}ul>li {list-style: none;float: left;width: 198px;height: 80px;background-color: gray;text-align: center;font-size: 30px;font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;line-height: 80px;border: 1px solid white;}/*添加外墙. 防止父级塌陷*/ul:after {display: table;content: "";clear: both;}.content {width: 600px;height: 320px;background-color: pink;display: none;text-align: center;line-height: 320px;font-size: 50px;}div.active {display: block;}li.active {background-color: red;}</style></head><body><div class="box"><ul><li class="active">首页</li><li>双色球</li><li>大乐透</li></ul><div class="content active">这里是首页</div><div class="content">这里是双色球</div><div class="content">这里是大乐透</div></div><script>var arr = document.getElementsByTagName('li')for (var i=0;i<arr.length;i++){// 绑定点击事件并添加样式arr[i].n = iarr[i].onclick = function(){// 删除所有的样式for (var j=0;j<arr.length;j++){arr[j].classList.remove('active')document.getElementsByClassName('content')[j].classList.remove('active')}this.classList.add('active')document.getElementsByClassName('content')[this.n].classList.add('active')}}</script></body></html>

原生JavaScript( 五 )

推荐阅读

电脑版微信怎么发朋友圈电脑版微信怎么发朋友圈视频

江苏省公务员abc类区别江苏省公务员abc类的区别

越在乎你才会越嫌弃你的星座，天蝎上榜！

大连金普新区文旅场馆7月19日起取消查验核酸报告

白羊座最适合的运动

王丽云主演的电视剧有哪些王丽云演的全部电视剧

芋头和香芋一样吗？芋头什么人不能多吃

形容教室里很多人的成语

保护视力的绘画作品保护视力的绘画作品画法

关于来不及诉说简述来不及诉说

鱼鳞痣怎么祛除掉鱼鳞痣怎么祛除

铝锅煮汤对人体有害吗，不建议经常使用铝锅煮汤

伊美婷成分伊美婷胶原蛋白安全吗

肉煎饺的做法步骤肉煎饺的做法步骤

攀升MaxBook P2参数_攀升MaxBook P2配置

发朋友圈运动的幽默句子发朋友圈运动句子

荞麦茶的功效有哪些荞麦茶有什么作用功效

职工医保和城乡居民医保哪个划算？交哪个好

属兔的适合住什么楼层最好住几楼大吉？

《四季豆一定要焯水吗》