tab栏切换制作,点击导航栏切换内容
代码的详细解析:
-
首先定义了一个包含导航栏和内容区域的HTML结构。导航栏使用
ul
元素,每个导航项使用li
元素。内容区域使用一个具有.main
类名的div
元素,其中包含多个具有.item
类名的div
元素。 -
使用CSS样式对导航栏和内容进行了样式设置。导航栏具有一个背景颜色,并且每个导航项平均分配宽度。当鼠标悬停在导航项上时,会改变背景颜色。内容区域的文本使用不同的字体和样式进行了显示。
-
在JavaScript代码中,首先使用
document.querySelectorAll
方法获取所有的导航项(lis
)和内容项(items
)。 -
使用
setAttribute
方法为每个导航项添加了一个自定义属性index
,并设置为当前项的索引。 -
为每个导航项添加了一个点击事件监听器(
onclick
)。当导航项被点击时,执行相应的函数。 -
在点击事件处理函数中,首先移除所有导航项的类名,然后将当前点击的导航项添加类名
color
,以显示选中状态。 -
获取点击导航项的索引,通过设置对应索引的内容项的
style.display
属性为block
,以显示对应的内容。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { background-color: aquamarine; width: 80%; height: 8vmin; margin: 10vmin auto; /* display: table; */ display: flex; } li { /* display: table-cell; */ line-height: 8vmin; text-align: center; display: inline-block; width: 20%; } li:hover { background-color: orangered; } .color { background-color: red; } .item{ /* font-family: "华文新魏"; */ font-size: 4em; font-family: "华文行楷" } .small{ font-family: "华文行楷"; font-size: 4em; } .main div{ width: 80%; height: 100px; margin: 0 auto; } </style> </head> <body> <ul> <li class="color">企业简介</li> <li>企业动态</li> <li>产品展示</li> <li>成功案例</li> <li>行业资讯</li> </ul> <div class="main"> <div class="item" style="display: block;"> 鲜衣怒马少年郎,对镜自怜夜不眠 </div> <div class="item" style="display: none;"> 我与春风携过客,你携秋水揽星河 </div> <div class="item" style="display: none;"> 远赴人间惊鸿宴,一睹人间盛世颜 </div> <div class="item" style="display: none;"> 少年曾许凌云志,取得人间第一流 </div> <div class="item" style="display: none;"> 别人笑我太疯颠,我笑他人看不穿 </div> <!-- <div class="small"> 青天有月来几时,我今停杯一问之 </div> --> </div> <script> var lis = document.querySelectorAll('li') var items = document.querySelectorAll('.item') for (i = 0; i < lis.length; i++) { lis[i].setAttribute('index', i) lis[i].onclick = function () { for (var i = 0; i < lis.length; i++) { lis[i].className = '' } this.className = 'color' var index = this.getAttribute('index') for (var i = 0; i < items.length; i++) { items[i].style.display = 'none' } items[index].style.display = 'block' } } </script> </body> </html>
效果图